!236 api14适配

Merge pull request !236 from lijinfengde123/master

.clang-format

@@ -1,7 +1,7 @@
 Language: Cpp
 # BasedOnStyle: LLVM
 ColumnLimit: 120
-SortIncludes: false
+SortIncludes: CaseSensitive
 TabWidth: 4
 IndentWidth: 4
 UseTab: Never

build-profile.json5

@@ -19,8 +19,8 @@
       {
         "name": "default",
         "signingConfig": "default",
-        "compileSdkVersion": 12,
-        "compatibleSdkVersion": 12
+        "compileSdkVersion": 14,
+        "compatibleSdkVersion": 14
       }
     ],
     "signingConfigs": [

common/src/main/ets/default/camera/CameraPlatformCapability.ts

@@ -30,22 +30,22 @@ export class CameraPlatformCapability {
   public mPhotoPreviewSize = [
     { width: 640, height: 480 }, //Photo 4:3
     { width: 720, height: 720 }, //Photo 1:1
-    { width: 1920, height: 1080 }, //Photo 16:9
+    { width: 1920, height: 1080 },//Photo 16:9
   ]
   public mVideoPreviewSize = [
     { width: 1280, height: 720 }, //Video 16:9 720p
     { width: 1920, height: 1080 }, //Video 16:9 1080p
-    { width: 1920, height: 1080 } //Video 16:9 4k
+    { width: 1920, height: 1080 }//Video 16:9 4k
   ]
   public mImageSize = [
     { width: 1280, height: 960 }, //4:3
     { width: 3120, height: 3120 }, //1:1
-    { width: 1920, height: 1080 } //16:9
+    { width: 1920, height: 1080 }//16:9
   ]
   public mVideoFrameSize = [
     { width: 1280, height: 720 }, //16:9 720p
     { width: 1920, height: 1080 }, //16:9 1080p
-    { width: 3840, height: 2160 } //16:9 4k
+    { width: 3840, height: 2160 }//16:9 4k
   ]
 
   constructor() {

common/src/main/ets/default/camera/CameraService.ts

@@ -142,10 +142,12 @@ export class CameraService {
           for (let i = 0; i < cameras.length; i++) {
             Log.info(`${TAG} camera_id: ${cameras[i].cameraId}  cameraPosition: ${cameras[i].cameraPosition}
               cameraType: ${cameras[i].cameraType} connectionType: ${cameras[i].connectionType}`);
-            if (cameras[i].cameraPosition === FRONT_CAMERA_POSITION && cameras[i].connectionType !== CAMERA_CONNECT_TYPE) {
+            if (cameras[i].cameraPosition === FRONT_CAMERA_POSITION &&
+              cameras[i].connectionType !== CAMERA_CONNECT_TYPE) {
               this.mLocalCameraMap.set('front', 'true');
             }
-            if (cameras[i].cameraPosition !== FRONT_CAMERA_POSITION && cameras[i].connectionType !== CAMERA_CONNECT_TYPE) {
+            if (cameras[i].cameraPosition !== FRONT_CAMERA_POSITION &&
+              cameras[i].connectionType !== CAMERA_CONNECT_TYPE) {
               this.mLocalCameraMap.set('back', 'true');
             }
           }
@@ -369,7 +371,8 @@ export class CameraService {
         ReportUtil.write(ReportUtil.OPEN_FAIL);
       }
     }
-    if (GlobalContext.get().getT<boolean>('cameraStartFlag') && (new Date().getTime() - GlobalContext.get().getT<number>('cameraStartTime')) > 2000) {
+    if (GlobalContext.get().getT<boolean>('cameraStartFlag') &&
+      (new Date().getTime() - GlobalContext.get().getT<number>('cameraStartTime')) > 2000) {
       ReportUtil.write(ReportUtil.START_TIMEOUT);
     }
     GlobalContext.get().setObject('cameraStartFlag', false);

common/src/main/ets/default/camera/SaveCameraAsset.ts

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import fs, { Filter, ConflictFiles } from '@ohos.file.fs';
+import fs from '@ohos.file.fs';
 import image from '@ohos.multimedia.image';
 import UserFileManager from '@ohos.filemanagement.userFileManager';
 import dataSharePredicates from '@ohos.data.dataSharePredicates';
@@ -24,7 +24,6 @@ import { FunctionCallBack, VideoCallBack } from './CameraService';
 import ThumbnailGetter from './ThumbnailGetter';
 import ReportUtil from '../utils/ReportUtil';
 import { GlobalContext } from '../utils/GlobalContext';
-import buffer from '@ohos.buffer';
 
 const TAG = '[SaveCameraAsset]:';
 
@@ -34,10 +33,10 @@ export type FetchOpType = {
 };
 
 export default class SaveCameraAsset {
+  public videoPrepareFile: UserFileManager.FileAsset;
   private lastSaveTime = '';
   private saveIndex = 0;
   private mUserFileManager: UserFileManager.UserFileManager;
-  public videoPrepareFile: UserFileManager.FileAsset;
   private mCameraAlbum: UserFileManager.Album;
   private photoUri: string = '';
   private videoUri: string = '';
@@ -51,17 +50,8 @@ export default class SaveCameraAsset {
     return this.photoUri;
   }
 
-  private async createCameraAlbum(): Promise<void> {
-    Log.log(`${TAG} createCameraAlbum E`);
-    if (!this.mCameraAlbum) {
-      let fetchResult = await this.mUserFileManager?.getAlbums(UserFileManager.AlbumType.SYSTEM, UserFileManager.AlbumSubType.CAMERA);
-      this.mCameraAlbum = await fetchResult?.getFirstObject();
-      Log.log(`${TAG} createCameraAlbum albumUri: ${JSON.stringify(this.mCameraAlbum.albumUri)}`);
-    }
-    Log.log(`${TAG} createCameraAlbum X`);
-  }
-
-  public saveImage(mReceiver, thumbWidth: number, thumbHeight: number, thumbnailGetter: ThumbnailGetter, captureCallBack: FunctionCallBack): void {
+  public saveImage(mReceiver, thumbWidth: number, thumbHeight: number, thumbnailGetter: ThumbnailGetter,
+    captureCallBack: FunctionCallBack): void {
     Log.info(`${TAG} saveImage E mediaLibrary.getMediaLibrary media: ${this.mUserFileManager}`);
     mReceiver.on('imageArrival', async () => {
       Log.start(Log.UPDATE_PHOTO_THUMBNAIL);
@@ -174,6 +164,58 @@ export default class SaveCameraAsset {
     return fileAsset;
   }
 
+  public async createAsset(type: UserFileManager.FileType): Promise<UserFileManager.FileAsset> {
+    const displayName = this.getDisplayName(type);
+    Log.info(`${TAG} createAsset  displayName: ${displayName}`);
+    let option: UserFileManager.PhotoCreateOptions = {
+      subType: UserFileManager.PhotoSubType.CAMERA,
+    };
+    let fileAsset: UserFileManager.FileAsset;
+    try {
+      fileAsset = await this.mUserFileManager.createPhotoAsset(displayName, option);
+      if (fileAsset !== undefined) {
+        Log.info(`${TAG} createPhotoAsset successfully displayName` + fileAsset.displayName);
+      } else {
+        Log.error(`${TAG} createPhotoAsset failed, fileAsset is undefined `);
+      }
+    } catch (e) {
+      Log.error(`${TAG} createPhotoAsset failed, error: ${JSON.stringify(e)}}`);
+    }
+    return fileAsset;
+  }
+
+  public async createVideoFd(captureCallBack: VideoCallBack): Promise<number | undefined> {
+    Log.info(`${TAG} createVideoFd E`);
+    const fileAsset: UserFileManager.FileAsset = await this.createAsset(UserFileManager.FileType.VIDEO);
+    if (!fileAsset) {
+      Log.error(`${TAG} createVideoFd mediaLibrary createAsset error: fileAsset undefined.`);
+      return undefined;
+    }
+    let fdNumber: number = 0;
+    try {
+      this.videoPrepareFile = fileAsset;
+      this.videoUri = fileAsset.uri;
+      captureCallBack.videoUri(this.videoUri);
+      Log.info(`${TAG} SaveCameraAsset getLastObject.uri: ${JSON.stringify(fileAsset.uri)}`);
+      fdNumber = await fileAsset.open('Rw');
+    } catch (err) {
+      Log.error(`${TAG} createVideoFd err: ${err}`);
+    }
+    Log.info(`${TAG} createVideoFd X`);
+    return fdNumber;
+  }
+
+  private async createCameraAlbum(): Promise<void> {
+    Log.log(`${TAG} createCameraAlbum E`);
+    if (!this.mCameraAlbum) {
+      let fetchResult =
+        await this.mUserFileManager?.getAlbums(UserFileManager.AlbumType.SYSTEM, UserFileManager.AlbumSubType.CAMERA);
+      this.mCameraAlbum = await fetchResult?.getFirstObject();
+      Log.log(`${TAG} createCameraAlbum albumUri: ${JSON.stringify(this.mCameraAlbum.albumUri)}`);
+    }
+    Log.log(`${TAG} createCameraAlbum X`);
+  }
+
   private async fileAssetOperate(fileAsset: UserFileManager.FileAsset, operate: (fd: number) => void): Promise<void> {
     const fd: number = <number> await fileAsset.open('Rw').catch(error => {
       Log.error(`${TAG} fileAsset open error: ${JSON.stringify(error)}`);
@@ -218,26 +260,6 @@ export default class SaveCameraAsset {
     return undefined;
   }
 
-  public async createAsset(type: UserFileManager.FileType): Promise<UserFileManager.FileAsset> {
-    const displayName = this.getDisplayName(type);
-    Log.info(`${TAG} createAsset  displayName: ${displayName}`);
-    let option: UserFileManager.PhotoCreateOptions = {
-      subType: UserFileManager.PhotoSubType.CAMERA,
-    };
-    let fileAsset: UserFileManager.FileAsset;
-    try {
-      fileAsset = await this.mUserFileManager.createPhotoAsset(displayName, option);
-      if (fileAsset !== undefined) {
-        Log.info(`${TAG} createPhotoAsset successfully displayName` + fileAsset.displayName);
-      } else {
-        Log.error(`${TAG} createPhotoAsset failed, fileAsset is undefined `);
-      }
-    } catch (e) {
-      Log.error(`${TAG} createPhotoAsset failed, error: ${JSON.stringify(e)}}`);
-    }
-    return fileAsset;
-  }
-
   private getDisplayName(type: UserFileManager.FileType): string {
     const mDateTimeUtil: DateTimeUtil = new DateTimeUtil();
     const mData: string = mDateTimeUtil.getDate();
@@ -249,27 +271,6 @@ export default class SaveCameraAsset {
     }
   }
 
-  public async createVideoFd(captureCallBack: VideoCallBack): Promise<number | undefined> {
-    Log.info(`${TAG} createVideoFd E`);
-    const fileAsset: UserFileManager.FileAsset = await this.createAsset(UserFileManager.FileType.VIDEO);
-    if (!fileAsset) {
-      Log.error(`${TAG} createVideoFd mediaLibrary createAsset error: fileAsset undefined.`);
-      return undefined;
-    }
-    let fdNumber: number = 0;
-    try {
-      this.videoPrepareFile = fileAsset;
-      this.videoUri = fileAsset.uri;
-      captureCallBack.videoUri(this.videoUri);
-      Log.info(`${TAG} SaveCameraAsset getLastObject.uri: ${JSON.stringify(fileAsset.uri)}`);
-      fdNumber = await fileAsset.open('Rw');
-    } catch (err) {
-      Log.error(`${TAG} createVideoFd err: ${err}`);
-    }
-    Log.info(`${TAG} createVideoFd X`);
-    return fdNumber;
-  }
-
   private checkName(name: string): string {
     if (this.lastSaveTime === name) {
       this.saveIndex++;

common/src/main/ets/default/camera/ThumbnailGetter.ts

@@ -16,13 +16,12 @@
 import UserFileManager from '@ohos.filemanagement.userFileManager';
 import dataSharePredicates from '@ohos.data.dataSharePredicates';
 import image from '@ohos.multimedia.image';
-import { Log } from '../utils/Log'
+import { Log } from '../utils/Log';
 import { GlobalContext } from '../utils/GlobalContext';
 
 const TAG = '[ThumbnailGetter]:';
 
 export default class ThumbnailGetter {
-
   private mUserFileManager: UserFileManager.UserFileManager;
   private mCameraAlbum: UserFileManager.Album;
   private mRecentFileUri: string = '';
@@ -62,16 +61,6 @@ export default class ThumbnailGetter {
     return this.getFileAssetByFetchOp(fetchOptions);
   }
 
-  private async createCameraAlbum(): Promise<void> {
-    Log.log(`${TAG} createCameraAlbum E`);
-    if (!this.mCameraAlbum) {
-      let fetchResult = await this.mUserFileManager?.getAlbums(UserFileManager.AlbumType.SYSTEM, UserFileManager.AlbumSubType.CAMERA);
-      this.mCameraAlbum = await fetchResult?.getFirstObject();
-      Log.log(`${TAG} createCameraAlbum albumUri: ${JSON.stringify(this.mCameraAlbum.albumUri)}`);
-    }
-    Log.log(`${TAG} createCameraAlbum X`);
-  }
-
   public getRecentFileUri(): string {
     return this.mRecentFileUri;
   }
@@ -98,4 +87,15 @@ export default class ThumbnailGetter {
     Log.info(`${TAG} mRecentFileUri : ${JSON.stringify(this.mRecentFileUri)}`);
     return fileAsset;
   }
+
+  private async createCameraAlbum(): Promise<void> {
+    Log.log(`${TAG} createCameraAlbum E`);
+    if (!this.mCameraAlbum) {
+      let fetchResult =
+        await this.mUserFileManager?.getAlbums(UserFileManager.AlbumType.SYSTEM, UserFileManager.AlbumSubType.CAMERA);
+      this.mCameraAlbum = await fetchResult?.getFirstObject();
+      Log.log(`${TAG} createCameraAlbum albumUri: ${JSON.stringify(this.mCameraAlbum.albumUri)}`);
+    }
+    Log.log(`${TAG} createCameraAlbum X`);
+  }
 }

common/src/main/ets/default/featurecommon/animate/ShowFlashBlack.ets

@@ -14,9 +14,9 @@
  */
 
 import { Log } from '../../utils/Log';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 import { Action } from '../../redux/actions/Action';
+
 class StateStruct {
   xComponentWidth: number = 0;
   xComponentHeight: number = 0;
@@ -24,8 +24,6 @@ class StateStruct {
 
 
 class ShowFlashBlackDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -33,13 +31,15 @@ class ShowFlashBlackDispatcher {
   public updateShowFlashBlackFlag(flag: boolean): void {
     this.mDispatch(Action.updateShowFlashBlackFlag(flag));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export struct ShowFlashBlack {
-  private TAG: string = '[ShowFlashBlack]:'
   @State state: StateStruct = new StateStruct()
   @State opacityValue: number = 1
+  private TAG: string = '[ShowFlashBlack]:'
   private mAction: ShowFlashBlackDispatcher = new ShowFlashBlackDispatcher();
 
   aboutToAppear() {

common/src/main/ets/default/featurecommon/assistivegridview/AssistiveGridView.ets

@@ -14,8 +14,7 @@
  */
 
 import { Log } from '../../utils/Log';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 
 class StateStruct {
   xComponentWidth: number = 0;
@@ -23,15 +22,16 @@ class StateStruct {
 }
 
 class AssistiveGridViewDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export struct AssistiveGridView {
+  @State state: StateStruct = new StateStruct();
   private TAG: string = '[AssistiveGridView]:';
   private mGlobalAlpha: number = 0.5;
   private mLineWidth: number = 0.5;
@@ -43,7 +43,6 @@ export struct AssistiveGridView {
   private settings: RenderingContextSettings = new RenderingContextSettings(true);
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   private mAction: AssistiveGridViewDispatcher = new AssistiveGridViewDispatcher();
-  @State state: StateStruct = new StateStruct();
 
   aboutToAppear(): void {
     Log.info(`${this.TAG} aboutToAppear invoke E`);

common/src/main/ets/default/featurecommon/cameraswitcher/CameraSwitchButton.ets

@@ -15,8 +15,7 @@
 
 import { Action } from '../../redux/actions/Action';
 import { CameraSwitchController } from './CameraSwitchController';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 import { Log } from '../../utils/Log';
 import MultiCameraDialog from '../customdialog/MultiCameraDialog';
 import deviceInfo from '@ohos.deviceInfo';
@@ -34,8 +33,6 @@ class StateStruct {
 
 
 class CameraSwitchDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -45,12 +42,13 @@ class CameraSwitchDispatcher {
     this.mDispatch(Action.switchCamera(cameraPosition));
     this.mDispatch(Action.resetZoomRatio(1));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 
 @Component
 export struct CameraSwitchButton {
-  private TAG: string = '[CameraSwitchButton]:'
   @State state: StateStruct = new StateStruct()
   @State deviceType: string = deviceInfo.deviceType
   @StorageLink('storageCameraId') storageCameraId: string = ''
@@ -60,7 +58,6 @@ export struct CameraSwitchButton {
   mMargin: number = 0;
   type: ButtonType = ButtonType.Capsule;
   stateEffect: boolean = false;
-  private mAction: CameraSwitchDispatcher = new CameraSwitchDispatcher();
   cameraSwitchController: CameraSwitchController = new CameraSwitchController()
   multiDialogController: CustomDialogController = new CustomDialogController({
     builder: MultiCameraDialog({
@@ -72,6 +69,8 @@ export struct CameraSwitchButton {
     customStyle: true,
     cancel: this.existView
   })
+  private TAG: string = '[CameraSwitchButton]:'
+  private mAction: CameraSwitchDispatcher = new CameraSwitchDispatcher();
 
   aboutToAppear() {
     Log.info(`${this.TAG} aboutToAppear E`);
@@ -95,22 +94,20 @@ export struct CameraSwitchButton {
     Log.info(`${this.TAG} aboutToAppear X`)
   }
 
-  private openMultiDialog() {
-    Log.info(`${this.TAG} openMultiDialog E`)
-    this.multiDialogController.open()
-    Log.info(`${this.TAG} openMultiDialog X`)
-  }
-
-  private existView(): void {}
-
   build() {
     Column() {
       Stack() {
         Image($r('app.media.small_switch_camera'))
           .width('67.5%').aspectRatio(1)
           .clip(new Circle({ width: '100%', height: '100%' }))
-        Column() {}.width(44).height(44)
-        .border({ width: 1, color: Color.White, radius: 22, style: BorderStyle.Solid })
+        Column() {
+        }.width(44).height(44)
+        .border({
+          width: 1,
+          color: Color.White,
+          radius: 22,
+          style: BorderStyle.Solid
+        })
       }
       .width('100%').height('100%').enabled(this.state.uiEnable)
       .onClick(() => {
@@ -121,7 +118,7 @@ export struct CameraSwitchButton {
           if (this.state.mode === 'MULTI') {
             this.openMultiDialog()
           } else {
-            GlobalContext.get().setObject('switchCameraTime',new Date().getTime())
+            GlobalContext.get().setObject('switchCameraTime', new Date().getTime())
             if (this.state.cameraPosition !== 'BACK') {
               this.mAction.changeCameraPosition('BACK')
               this.storageCameraId = 'BACK'
@@ -135,4 +132,13 @@ export struct CameraSwitchButton {
       })
     }.width(44).aspectRatio(1)
   }
+
+  private openMultiDialog() {
+    Log.info(`${this.TAG} openMultiDialog E`)
+    this.multiDialogController.open()
+    Log.info(`${this.TAG} openMultiDialog X`)
+  }
+
+  private existView(): void {
+  }
 }

common/src/main/ets/default/featurecommon/customdialog/EntryComponentForMulti.ets

@@ -14,8 +14,7 @@
  */
 
 import { CameraService } from '../../camera/CameraService';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 import { Log } from '../../utils/Log';
 
 class StateStruct {
@@ -23,29 +22,28 @@ class StateStruct {
 }
 
 class ComponentForMultiDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 
 @Component
 export default struct EntryComponentForMulti {
-  private TAG: string = '[EntryComponentForMulti]:';
   @State state: StateStruct = new StateStruct();
   @State isLocalDevice: boolean = false;
   @State switchCameraState: boolean = false;
   @State recCameraState: boolean = true;
   @State defaultChecked: boolean = false;
   @State curCameraName: string = '';
+  private TAG: string = '[EntryComponentForMulti]:';
   private localList: string = '';
   private item: string = '';
-  private onChange: Function = () => {};
   private cameraService: CameraService = CameraService.getInstance();
   private deviceName: string = '';
-  private cameraPositionRes:string | Resource = '';
+  private cameraPositionRes: string | Resource = '';
   private cameraPositionName: string = '';
   private mAction: ComponentForMultiDispatcher = new ComponentForMultiDispatcher();
 
@@ -66,29 +64,6 @@ export default struct EntryComponentForMulti {
     }
   }
 
-  private getShowName(item: string): void {
-    this.cameraPositionName = item.split('_').pop() as string;
-    switch (this.cameraPositionName) {
-      case 'FRONT':
-        this.cameraPositionRes = $r('app.string.front')
-        break
-      case 'BACK':
-        this.cameraPositionRes = $r('app.string.back')
-        break
-      default:
-        break
-    }
-    if (item.split('_').length == 1) {
-      this.isLocalDevice = true
-    } else {
-      const cameraItem = this.cameraService.getCameraMap().get(item)
-      if (cameraItem) {
-        this.deviceName = cameraItem.deviceName as string;
-        this.isLocalDevice = false
-      }
-    }
-  }
-
   build() {
     Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
       Row() {
@@ -127,4 +102,30 @@ export default struct EntryComponentForMulti {
     .height(48)
     .width('100%')
   }
+
+  private onChange: Function = () => {
+  };
+
+  private getShowName(item: string): void {
+    this.cameraPositionName = item.split('_').pop() as string;
+    switch (this.cameraPositionName) {
+      case 'FRONT':
+        this.cameraPositionRes = $r('app.string.front')
+        break
+      case 'BACK':
+        this.cameraPositionRes = $r('app.string.back')
+        break
+      default:
+        break
+    }
+    if (item.split('_').length == 1) {
+      this.isLocalDevice = true
+    } else {
+      const cameraItem = this.cameraService.getCameraMap().get(item)
+      if (cameraItem) {
+        this.deviceName = cameraItem.deviceName as string;
+        this.isLocalDevice = false
+      }
+    }
+  }
 }

common/src/main/ets/default/featurecommon/customdialog/MultiCameraDialog.ets

@@ -17,8 +17,7 @@ import { CameraService } from '../../camera/CameraService';
 import { CameraId } from '../../setting/settingitem/CameraId';
 import { Log } from '../../utils/Log';
 import EntryComponentForMulti from './EntryComponentForMulti';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 import { Action } from '../../redux/actions/Action';
 
 let storageCameraId: string = AppStorage.Link('storageCameraId') as string;
@@ -27,8 +26,6 @@ class StateStruct {
 }
 
 class MultiCameraDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -38,34 +35,39 @@ class MultiCameraDispatcher {
     this.mDispatch(Action.switchCamera(cameraPosition));
     this.mDispatch(Action.resetZoomRatio(1));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 
 @CustomDialog
 export default struct MultiCameraDialog {
-  private TAG: string = '[MultiCameraDialog]:';
-  private cameraService = CameraService.getInstance();
   controller?: CustomDialogController;
-  cancel: () => void = () => {};
-  confirm: () => void = () => {};
-  private localList: string[] = [
-  CameraId.FRONT,
-  CameraId.BACK
-  ];
-  @State private moreList: string[] = [];
   @State state: StateStruct = new StateStruct();
   @State isShowMore: boolean = false;
   @State gridColumns: number = 12;
   @State useSizeTypeOffset: number = 4;
   @Link deviceType: string;
   @StorageLink('storageCameraId') storageCameraId: string = '';
+  private TAG: string = '[MultiCameraDialog]:';
+  private cameraService = CameraService.getInstance();
+  private localList: string[] = [
+    CameraId.FRONT,
+    CameraId.BACK
+  ];
+  @State private moreList: string[] = [];
   private mAction: MultiCameraDispatcher = new MultiCameraDispatcher();
 
+  cancel: () => void = () => {
+  };
+
+  confirm: () => void = () => {
+  };
+
   aboutToAppear() {
     Log.info(`${this.TAG} aboutToAppear.`)
     getStore().subscribe((state: OhCombinedState) => {
-      this.state = {
-      };
+      this.state = {};
     }, (dispatch: Dispatch) => {
       this.mAction.setDispatch(dispatch);
     });
@@ -76,7 +78,7 @@ export default struct MultiCameraDialog {
     } else if (!localCameraInfo.get('back')) {
       this.localList.pop()
     }
-    if (this.deviceType === 'phone' || this .deviceType === 'default') {
+    if (this.deviceType === 'phone' || this.deviceType === 'default') {
       this.gridColumns = 4
       this.useSizeTypeOffset = 0
     } else {
@@ -85,20 +87,6 @@ export default struct MultiCameraDialog {
     }
   }
 
-  private onChange(item: string): void {
-    Log.info(`${this.TAG} MultiCameraPosition ${JSON.stringify(item)}`)
-    if (item.includes('BACK')) {
-      this.storageCameraId = 'BACK'
-    } else if(item.includes('FRONT')) {
-      this.storageCameraId = 'FRONT'
-    }
-    this.mAction.changeCameraPosition(item);
-    this.cancel();
-    if (this.controller) {
-      this.controller.close();
-    }
-  }
-
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
       GridContainer({ columns: this.gridColumns, gutter: 12, margin: 12 }) {
@@ -122,7 +110,7 @@ export default struct MultiCameraDialog {
           }
           .width('100%')
           .height('48vp')
-          .padding({top: 20, bottom: 8})
+          .padding({ top: 20, bottom: 8 })
 
           List() {
             ForEach(this.localList, (item: string) => {
@@ -130,7 +118,7 @@ export default struct MultiCameraDialog {
                 EntryComponentForMulti({
                   item: item,
                   localList: this.localList.toString(),
-                  onChange: (data:string) => this.onChange(data)
+                  onChange: (data: string) => this.onChange(data)
                 })
               }
               .width('100%')
@@ -138,7 +126,12 @@ export default struct MultiCameraDialog {
             })
           }
           .listDirection(Axis.Vertical)
-          .divider({ strokeWidth: '1vp', color: '#33182431', startMargin: 0, endMargin: 12})
+          .divider({
+            strokeWidth: '1vp',
+            color: '#33182431',
+            startMargin: 0,
+            endMargin: 12
+          })
 
           Row() {
             Text($r('app.string.more_devices'))
@@ -148,7 +141,7 @@ export default struct MultiCameraDialog {
           }
           .width('100%')
           .height('48vp')
-          .padding({top: 20, bottom: 8})
+          .padding({ top: 20, bottom: 8 })
 
           if (this.isShowMore) {
             List() {
@@ -165,7 +158,12 @@ export default struct MultiCameraDialog {
               })
             }
             .listDirection(Axis.Vertical)
-            .divider({ strokeWidth: 0.5, color: '#33000000', startMargin: 0, endMargin: 12 })
+            .divider({
+              strokeWidth: 0.5,
+              color: '#33000000',
+              startMargin: 0,
+              endMargin: 12
+            })
           }
 
           Column() {
@@ -203,4 +201,18 @@ export default struct MultiCameraDialog {
       }.width('100%')
     }
   }
+
+  private onChange(item: string): void {
+    Log.info(`${this.TAG} MultiCameraPosition ${JSON.stringify(item)}`)
+    if (item.includes('BACK')) {
+      this.storageCameraId = 'BACK'
+    } else if (item.includes('FRONT')) {
+      this.storageCameraId = 'FRONT'
+    }
+    this.mAction.changeCameraPosition(item);
+    this.cancel();
+    if (this.controller) {
+      this.controller.close();
+    }
+  }
 }

common/src/main/ets/default/featurecommon/customdialog/dialogComponent/CustomDialogView.ets

@@ -17,28 +17,26 @@ import deviceInfo from '@ohos.deviceInfo';
 
 import { Action } from '../../../redux/actions/Action';
 import { Log } from '../../../utils/Log';
-import { Dispatch, OhCombinedState } from '../../../redux/store';
-import { getStore } from '../../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../../redux/store';
 import EntryComponent from './EntryComponent';
 
 @Observed
 export class CustomDialogDetails {
-  confirmCallback: Function = () => {
-  };
   confirmItem: boolean = false;
   height: number = 0;
   width: number = 0;
   setAlias: string = '';
   childrenList: ChildrenItemStruct[] = [];
   settingTitle: string = '';
+
+  confirmCallback: Function = () => {
+  };
 }
 
 class StateStruct {
 }
 
 class CustomDialogViewDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -46,6 +44,8 @@ class CustomDialogViewDispatcher {
   public closeDialog(isCloseFlag: boolean): void {
     this.mDispatch(Action.closeDialog(isCloseFlag));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 class ChildrenItemStruct {
@@ -59,20 +59,22 @@ class StyleStruct {
 
 @CustomDialog
 export struct CustomDialogView {
-  private TAG: string = '[CustomDialogView]:'
   localStyle: StyleStruct = { columns: 4, offset: 0 };
   controller?: CustomDialogController;
-  cancel: () => void = () => {
-  };
-  confirm: () => void = () => {
-  };
   @Consume customDialogDetails: CustomDialogDetails;
   @State settingAlias: string = "";
   @State getValue: string = "";
   @State childrenList: Array<ChildrenItemStruct> = [];
   @State state: StateStruct = new StateStruct();
+  private TAG: string = '[CustomDialogView]:'
   private mAction: CustomDialogViewDispatcher = new CustomDialogViewDispatcher();
 
+  cancel: () => void = () => {
+  };
+
+  confirm: () => void = () => {
+  };
+
   async aboutToAppear() {
     Log.info(`${this.TAG} aboutToAppear start`)
     this.childrenList = this.customDialogDetails.childrenList
@@ -127,7 +129,12 @@ export struct CustomDialogView {
             })
           }
           .listDirection(Axis.Vertical)
-          .divider({ strokeWidth: 0.5, color: '#33000000', startMargin: 0, endMargin: 12 }) // 每行之间的分界线
+          .divider({
+            strokeWidth: 0.5,
+            color: '#33000000',
+            startMargin: 0,
+            endMargin: 12
+          }) // 每行之间的分界线
           Column() {
             Button({ type: ButtonType.Capsule, stateEffect: true }) {
               Text($r('app.string.cancel'))
@@ -188,7 +195,12 @@ export struct CustomDialogView {
               })
             }
             .listDirection(Axis.Vertical)
-            .divider({ strokeWidth: 0.5, color: '#33000000', startMargin: 0, endMargin: 12 }) // 每行之间的分界线
+            .divider({
+              strokeWidth: 0.5,
+              color: '#33000000',
+              startMargin: 0,
+              endMargin: 12
+            }) // 每行之间的分界线
             Column() {
               Button({ type: ButtonType.Capsule, stateEffect: true }) {
                 Text($r('app.string.cancel'))

common/src/main/ets/default/featurecommon/customdialog/dialogComponent/EntryComponent.ets

@@ -18,31 +18,29 @@ import { SettingManager } from '../../../setting/SettingManager';
 import Timer from '../../../setting/settingitem/Timer';
 import AspectRatio from '../../../setting/settingitem/AspectRatio';
 import Resolution from '../../../setting/settingitem/Resolution';
-import { Dispatch, OhCombinedState } from '../../../redux/store';
-import { getStore } from '../../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../../redux/store';
 
 class StateStruct {
   mode: string = '';
 }
 
 class EntryComponentDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export default struct EntryComponent {
-  private TAG: string = '[EntryComponent]:';
   @State itemValue: Resource = $r('app.string.photo_ratio_4_3');
   @State checkedValue: string = '';
   @State settingAlias: string = '';
-  private getValue: Resource = $r('app.string.resolution_1280_720');
-  private onChange: Function = () => {};
-  private settingManager = SettingManager.getInstance();
   @State state: StateStruct = new StateStruct();
+  private TAG: string = '[EntryComponent]:';
+  private getValue: Resource = $r('app.string.resolution_1280_720');
+  private settingManager = SettingManager.getInstance();
   private mAction: EntryComponentDispatcher = new EntryComponentDispatcher();
 
   aboutToAppear(): void {
@@ -93,4 +91,7 @@ export default struct EntryComponent {
     }
     .width('100%')
   }
+
+  private onChange: Function = () => {
+  };
 }

common/src/main/ets/default/featurecommon/geolocation/GeoLocation.ets

@@ -19,8 +19,8 @@ import { SettingManager } from '../../setting/SettingManager';
 import { BusinessError } from '@ohos.base';
 
 export class GeoLocation {
-  private TAG: string = '[GeoLocation]:'
   private static instance: GeoLocation
+  private TAG: string = '[GeoLocation]:'
   private requestInfo: geolocation.LocationRequest = {
     priority: 0x203,
     scenario: 0x300,
@@ -28,10 +28,6 @@ export class GeoLocation {
     distanceInterval: 0,
     maxAccuracy: 0
   }
-  private locationChange = (location: geolocation.Location): void => { //删掉参数err及相关逻辑
-    Log.info(`[GeoLocation]: locationChange: ${location}`)
-    SettingManager.getInstance().setCurGeoLocation(location)
-  }
 
   public static getInstance() {
     if (!GeoLocation.instance) {
@@ -57,7 +53,7 @@ export class GeoLocation {
         geolocation.getCurrentLocation(curRequestInfo).then((result) => {
           Log.info(`${this.TAG} on getCurrentLocation result: ${JSON.stringify(result)}`)
           SettingManager.getInstance().setCurGeoLocation(result)
-        }).catch((err:BusinessError) => {
+        }).catch((err: BusinessError) => {
           Log.info(`${this.TAG} on getCurrentLocation err result: ${JSON.stringify(err)}`)
         })
         geolocation.on('locationChange', this.requestInfo, this.locationChange)
@@ -75,4 +71,9 @@ export class GeoLocation {
     geolocation.off('locationChange', this.locationChange)
     Log.info(`${this.TAG} off X`)
   }
+
+  private locationChange = (location: geolocation.Location): void => { //删掉参数err及相关逻辑
+    Log.info(`[GeoLocation]: locationChange: ${location}`)
+    SettingManager.getInstance().setCurGeoLocation(location)
+  }
 }

common/src/main/ets/default/featurecommon/moreList/moreList.ets

@@ -15,8 +15,7 @@
 import deviceInfo from '@ohos.deviceInfo';
 import { Action } from '../../redux/actions/Action';
 import { Log } from '../../utils/Log';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 
 class MoreListInfo {
   itemIcon: Resource = $r('app.media.photo');
@@ -28,8 +27,6 @@ class StateStruct {
 }
 
 class MoreListDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -37,12 +34,14 @@ class MoreListDispatcher {
   public swipeChangeMode(swipeModeIndex: number): void {
     this.mDispatch(Action.swipeChangeMode(swipeModeIndex));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export struct MoreList {
-  private TAG: string = '[moreList]:';
   @State state: StateStruct = new StateStruct();
+  private TAG: string = '[moreList]:';
   private mAction: MoreListDispatcher = new MoreListDispatcher();
   private mDirection: PanDirection = PanDirection.Right;
   private moreList: MoreListInfo[] = [{
@@ -75,20 +74,6 @@ export struct MoreList {
     Log.info(`${this.TAG} aboutToAppear end`)
   }
 
-  private setDirection(): void {
-    switch (deviceInfo.deviceType) {
-      case 'PAD':
-        this.mDirection = PanDirection.Down
-        break
-      case 'tablet':
-        this.mDirection = PanDirection.Down
-        break
-      default:
-        this.mDirection = PanDirection.Right
-        break
-    }
-  }
-
   build() {
     Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
       Grid() {
@@ -118,10 +103,24 @@ export struct MoreList {
     .width('100%')
     .height('70%')
     .gesture(
-    PanGesture({ direction: this.mDirection })
-      .onActionEnd(() => {
-        this.mAction.swipeChangeMode(this.state.modeIndex - 1)
-      })
+      PanGesture({ direction: this.mDirection })
+        .onActionEnd(() => {
+          this.mAction.swipeChangeMode(this.state.modeIndex - 1)
+        })
     )
   }
+
+  private setDirection(): void {
+    switch (deviceInfo.deviceType) {
+      case 'PAD':
+        this.mDirection = PanDirection.Down
+        break
+      case 'tablet':
+        this.mDirection = PanDirection.Down
+        break
+      default:
+        this.mDirection = PanDirection.Right
+        break
+    }
+  }
 }

common/src/main/ets/default/featurecommon/playsound/playSound.ets

@@ -24,6 +24,7 @@ import { SettingManager } from '../../setting/SettingManager'
 import { Voice } from '../../setting/settingitem/Voice'
 
 export class PlaySound {
+  private static sInstancePlaySound: PlaySound;
   private TAG: string = '[PlaySound]:'
   private appEventBus: EventBus = EventBusManager.getInstance().getEventBus()
   private settingManager = SettingManager.getInstance()
@@ -31,7 +32,6 @@ export class PlaySound {
   private fdPath
   // @ts-ignore
   private mAVPlayer: media.AVPlayer
-  private static sInstancePlaySound: PlaySound;
 
   constructor() {
     Log.info(`${this.TAG} constructor start, enroll playCapture to ACTION_CAPTURE`)
@@ -44,6 +44,13 @@ export class PlaySound {
     })
   }
 
+  public static getInstance(): PlaySound {
+    if (!PlaySound.sInstancePlaySound) {
+      PlaySound.sInstancePlaySound = new PlaySound();
+    }
+    return PlaySound.sInstancePlaySound;
+  }
+
   setAVPlayerCallback(): void {
     Log.info(`${this.TAG} setAudioCallback`)
     this.mAVPlayer.on('stateChange', async (state, reason) => {
@@ -53,7 +60,8 @@ export class PlaySound {
           break;
         case 'initialized':
           Log.info(`${this.TAG} stateChange initialized state`)
-          this.mAVPlayer.prepare().then(() => {}, (err) => {
+          this.mAVPlayer.prepare().then(() => {
+          }, (err) => {
             Log.error(`${this.TAG} case prepare error`)
           })
           break;
@@ -88,12 +96,6 @@ export class PlaySound {
     })
   }
 
-  public static getInstance(): PlaySound {
-    if (!PlaySound.sInstancePlaySound) {
-      PlaySound.sInstancePlaySound = new PlaySound();
-    }
-    return PlaySound.sInstancePlaySound;
-  }
   private playCapture(data): void {
     Log.info(`${this.TAG} playCapture invoke E`);
     if (this.settingManager.getCaptureMute() == Voice.SOUND) {

common/src/main/ets/default/featurecommon/preferences/PreferencesService.ts

@@ -29,7 +29,8 @@ export class PreferencesService {
   public static getInstance(): PreferencesService {
     if (!globalThis?.sInstancePreferencesService) {
       globalThis.sInstancePreferencesService = new PreferencesService();
-      PreferencesService.modeStorage = dataStorage.getStorageSync(GlobalContext.get().getCameraAbilityContext().filesDir + '/mode_persist_values');
+      PreferencesService.modeStorage =
+        dataStorage.getStorageSync(GlobalContext.get().getCameraAbilityContext().filesDir + '/mode_persist_values');
     }
     return globalThis.sInstancePreferencesService;
   }
@@ -49,7 +50,8 @@ export class PreferencesService {
   }
 
   flush(): void {
-    PreferencesService.modeStorage.putSync(this.getModePersistKey(PersistType.FOR_AWHILE, 'Timestamp'), new Date().getTime());
+    PreferencesService.modeStorage.putSync(this.getModePersistKey(PersistType.FOR_AWHILE, 'Timestamp'),
+      new Date().getTime());
     this.flushMode();
   }
 

common/src/main/ets/default/featurecommon/screenlock/Decorators.ts

@@ -13,33 +13,33 @@
  * limitations under the License.
  */
 
-import { Log } from '../../utils/Log'
+import { Log } from '../../utils/Log';
 
 const TAG = '[Decorators]:'
 
 export function debounce(timeout: number) {
-    return function inner(target: any, propKey: string, descriptor: PropertyDescriptor) {
-        let curFunc: number = 0;
-        const original = descriptor.value;
-        descriptor.value = function (...args: string[]) {
-            Log.log(`${TAG} debounce invoke ${propKey} curFunc: ${curFunc}`);
-            curFunc && clearTimeout(curFunc);
-            curFunc = setTimeout(() => original.call(this, ...args), timeout);
-        };
+  return function inner(target: any, propKey: string, descriptor: PropertyDescriptor) {
+    let curFunc: number = 0;
+    const original = descriptor.value;
+    descriptor.value = function (...args: string[]) {
+      Log.log(`${TAG} debounce invoke ${propKey} curFunc: ${curFunc}`);
+      curFunc && clearTimeout(curFunc);
+      curFunc = setTimeout(() => original.call(this, ...args), timeout);
     };
+  };
 }
 
 export function throttle(waitTime: number) {
-    return function inner(target: any, propKey: string, descriptor: PropertyDescriptor) {
-        let lastTime: number = 0;
-        const original = descriptor.value;
-        descriptor.value = function (...args: string[]) {
-            let curTime = Date.now();
-            Log.log(`${TAG} throttle invoke ${propKey} timeInterval: ${curTime - lastTime}`);
-            if (curTime - lastTime >= waitTime) {
-                original.call(this, ...args);
-                lastTime = curTime;
-            }
-        };
+  return function inner(target: any, propKey: string, descriptor: PropertyDescriptor) {
+    let lastTime: number = 0;
+    const original = descriptor.value;
+    descriptor.value = function (...args: string[]) {
+      let curTime = Date.now();
+      Log.log(`${TAG} throttle invoke ${propKey} timeInterval: ${curTime - lastTime}`);
+      if (curTime - lastTime >= waitTime) {
+        original.call(this, ...args);
+        lastTime = curTime;
+      }
     };
+  };
 }

common/src/main/ets/default/featurecommon/settingview/model/SettingData.ts

@@ -14,9 +14,6 @@
  */
 
 export class SettingData {
-  constructor() {
-  }
-
   settingTitle?: string | Resource;
   imagePath?: string | Resource;
   settingName?: Resource;
@@ -26,6 +23,9 @@ export class SettingData {
   radio?: string;
   toggle?: string;
   description?: string;
+
+  constructor() {
+  }
 }
 
 

common/src/main/ets/default/featurecommon/settingview/phone/SetResolution.ets

@@ -15,11 +15,9 @@
 
 import { Action } from '../../../redux/actions/Action';
 import Timer from '../../../setting/settingitem/Timer';
-import { CustomDialogDetails } from '../../customdialog/dialogComponent/CustomDialogView';
-import { CustomDialogView } from '../../customdialog/dialogComponent/CustomDialogView';
+import { CustomDialogDetails, CustomDialogView } from '../../customdialog/dialogComponent/CustomDialogView';
 import { Log } from '../../../utils/Log';
-import { Dispatch, OhCombinedState } from '../../../redux/store';
-import { getStore } from '../../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../../redux/store';
 import { SettingManager } from '../../../setting/SettingManager';
 import { SettingData, SettingGroupItem } from '../model/SettingData';
 
@@ -27,8 +25,6 @@ class StateStruct {
 }
 
 class SetResolutionDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -36,22 +32,30 @@ class SetResolutionDispatcher {
   public closeDialog(isCloseFlag: boolean): void {
     this.mDispatch(Action.closeDialog(isCloseFlag));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 
 @Component
 export struct SetResolution {
-  private TAG: string = '[SetResolution]:';
   @Link settingsList: SettingGroupItem[];
   @Link @Watch('onCloseDialog') closeFlag: boolean;
+  @StorageLink('settingDialogFlag') settingDialogFlag: boolean = true;
+  @State curCheckName: Resource = $r('app.string.default_value');
+  @State state: StateStruct = new StateStruct();
+  CustomDialogView: CustomDialogController = new CustomDialogController({
+    builder: CustomDialogView({ cancel: () => this.existView() }),
+    autoCancel: true,
+    alignment: DialogAlignment.Bottom,
+    cancel: this.existView,
+    customStyle: true
+  });
+  private TAG: string = '[SetResolution]:';
   private itemValue: SettingData = {};
   private WH_100_100: string = "100%";
   private settingManager = SettingManager.getInstance();
   private setAlias: string = '';
-  @StorageLink('settingDialogFlag') settingDialogFlag: boolean = true;
-  @State curCheckName: Resource = $r('app.string.default_value');
-  @State state: StateStruct = new StateStruct();
-  private mAction: SetResolutionDispatcher = new SetResolutionDispatcher();
   @Provide customDialogDetails: CustomDialogDetails = {
     confirmCallback: Function,
     confirmItem: true,
@@ -61,13 +65,7 @@ export struct SetResolution {
     childrenList: [],
     settingTitle: ''
   };
-  CustomDialogView: CustomDialogController = new CustomDialogController({
-    builder: CustomDialogView({ cancel: () => this.existView() }),
-    autoCancel: true,
-    alignment: DialogAlignment.Bottom,
-    cancel: this.existView,
-    customStyle: true
-  });
+  private mAction: SetResolutionDispatcher = new SetResolutionDispatcher();
 
   existView(): void {
     Log.info(`${this.TAG} existView E`)

common/src/main/ets/default/featurecommon/settingview/phone/SetToggle.ets

@@ -16,31 +16,30 @@
 import { Log } from '../../../utils/Log';
 import { SettingManager } from '../../../setting/SettingManager';
 import { SettingData, SettingGroupItem } from '../model/SettingData';
-import { Dispatch, OhCombinedState } from '../../../redux/store';
-import { getStore } from '../../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../../redux/store';
 
 class StateStruct {
   mode: string = '';
 }
 
 class SetToggleDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export struct SetToggle {
-  private TAG: string = '[SetToggle]:';
   @Link settingsList: SettingGroupItem[];
   @State isOn: boolean = false;
+  @State generalStatusValue: boolean = false;
+  @State state: StateStruct = new StateStruct();
+  private TAG: string = '[SetToggle]:';
   private itemValue: SettingData = {};
   private WH_100_100: string = "100%";
   private settingManager = SettingManager.getInstance();
-  @State generalStatusValue: boolean = false;
-  @State state: StateStruct = new StateStruct();
   private mAction: SetToggleDispatcher = new SetToggleDispatcher();
 
   aboutToAppear() {
@@ -95,7 +94,8 @@ export struct SetToggle {
                 .opacity($r('sys.float.ohos_id_alpha_content_secondary'))
             }.margin({
               top: $r('sys.float.ohos_id_text_margin_vertical'),
-              left: 40 })
+              left: 40
+            })
           }
         }
         .layoutWeight(1)

common/src/main/ets/default/featurecommon/settingview/phone/SettingItem.ets

@@ -13,18 +13,16 @@
  * limitations under the License.
  */
 
-import { SettingManager } from '../../../setting/SettingManager'
-import { Log } from '../../../utils/Log'
-import { SetResolution } from './SetResolution'
-import { SetToggle } from './SetToggle'
-import { BaseData } from '../model/BaseData'
-import { SettingData, SettingGroupItem } from '../model/SettingData'
+import { Log } from '../../../utils/Log';
+import { SetResolution } from './SetResolution';
+import { SetToggle } from './SetToggle';
+import { SettingData, SettingGroupItem } from '../model/SettingData';
 
 @Component
 export struct SettingItem {
-  private TAG: string = '[SettingItem]:';
   @Link settingsList: SettingGroupItem[];
   @Link closeFlag: Boolean;
+  private TAG: string = '[SettingItem]:';
   private item: SettingGroupItem = {};
   private index: number = 0;
   private WH_100_100: string = "100%";
@@ -36,15 +34,19 @@ export struct SettingItem {
   }
 
   build() {
-    Flex({ direction: FlexDirection.Column,
+    Flex({
+      direction: FlexDirection.Column,
       alignItems: ItemAlign.Center,
-      justifyContent: FlexAlign.SpaceBetween }) {
+      justifyContent: FlexAlign.SpaceBetween
+    }) {
       Column() {
         Row() {
           Text(this.item.settingTitle)
-            .margin({ top: $r('app.float.margin_value_20'),
+            .margin({
+              top: $r('app.float.margin_value_20'),
               left: $r('sys.float.ohos_id_card_margin_start'),
-              bottom: $r('app.float.margin_value_8') })
+              bottom: $r('app.float.margin_value_8')
+            })
             .fontColor($r('app.color.font_color_FFFFFF'))
             .opacity($r('app.float.opacity_6'))
             .fontSize($r('app.float.font_14'))
@@ -79,7 +81,12 @@ export struct SettingItem {
           })
         }
         .listDirection(Axis.Vertical)
-        .divider({ strokeWidth: 0.5, color: '#33FFFFFF', startMargin: 56, endMargin: 12 })
+        .divider({
+          strokeWidth: 0.5,
+          color: '#33FFFFFF',
+          startMargin: 56,
+          endMargin: 12
+        })
         .borderRadius($r('sys.float.ohos_id_corner_radius_card'))
         .backgroundColor('#202224')
         .padding({ top: 4, bottom: 4 })

common/src/main/ets/default/featurecommon/settingview/tablet/TabletSetResolution.ets

@@ -15,20 +15,17 @@
 
 import { Action } from '../../../redux/actions/Action'
 import Timer from '../../../setting/settingitem/Timer'
-import { CustomDialogDetails } from '../../customdialog/dialogComponent/CustomDialogView'
-import { CustomDialogView } from '../../customdialog/dialogComponent/CustomDialogView'
+import { CustomDialogDetails, CustomDialogView } from '../../customdialog/dialogComponent/CustomDialogView'
 import { Log } from '../../../utils/Log'
-import { Dispatch, OhCombinedState } from '../../../redux/store'
-import { getStore } from '../../../redux/store'
+import { Dispatch, getStore, OhCombinedState } from '../../../redux/store'
 import { SettingManager } from '../../../setting/SettingManager'
 import { SettingData, SettingGroupItem } from '../model/SettingData'
 
 class StateStruct {
   isCloseFlag: boolean = false;
 }
-class SetResolutionDispatcher {
-  private mDispatch: Dispatch = (data) => data;
 
+class SetResolutionDispatcher {
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -36,24 +33,33 @@ class SetResolutionDispatcher {
   public closeDialog(isCloseFlag: boolean): void {
     this.mDispatch(Action.closeDialog(isCloseFlag));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export struct TabletSetResolution {
-  private TAG: string = '[TabletSetResolution]:';
   @Link settingsList: SettingGroupItem[];
   @Link @Watch('onCloseDialog') closeFlag: boolean;
+  @StorageLink('settingDialogFlag') settingDialogFlag: boolean = true;
+  @State curCheckName: Resource = $r('app.string.default_value');
+  @State state: StateStruct = new StateStruct();
+  CustomDialogView: CustomDialogController = new CustomDialogController({
+    builder: CustomDialogView({ cancel: () => this.existView }),
+    autoCancel: true,
+    alignment: DialogAlignment.Center,
+    cancel: this.existView,
+    customStyle: true
+  })
+  private TAG: string = '[TabletSetResolution]:';
   private itemValue: SettingData = new SettingData();
   private WH_100_100: string = "100%";
   private settingManager: SettingManager = SettingManager.getInstance();
   private setAlias: string = '';
-  @StorageLink('settingDialogFlag') settingDialogFlag: boolean = true;
-  @State curCheckName: Resource = $r('app.string.default_value');
-  @State state: StateStruct = new StateStruct();
   private mAction: SetResolutionDispatcher = new SetResolutionDispatcher();
-
   @Provide customDialogDetails: CustomDialogDetails = {
-    confirmCallback: () => {},
+    confirmCallback: () => {
+    },
     confirmItem: true,
     height: 256,
     width: 256,
@@ -62,13 +68,6 @@ export struct TabletSetResolution {
     settingTitle: '',
     //    dialogCloseFlag:false
   }
-  CustomDialogView: CustomDialogController = new CustomDialogController({
-    builder: CustomDialogView({ cancel: () => this.existView }),
-    autoCancel: true,
-    alignment: DialogAlignment.Center,
-    cancel: this.existView,
-    customStyle: true
-  })
 
   existView() {
     Log.info(`${this.TAG} existView E`)
@@ -83,7 +82,7 @@ export struct TabletSetResolution {
     Log.info(`${this.TAG} aboutToAppear settingsList: ${JSON.stringify(this.settingsList)} E`)
     getStore().subscribe((state: OhCombinedState) => {
       this.state = {
-        isCloseFlag:state.settingReducer.isCloseFlag
+        isCloseFlag: state.settingReducer.isCloseFlag
       };
     }, (dispatch: Dispatch) => {
       this.mAction.setDispatch(dispatch);

common/src/main/ets/default/featurecommon/settingview/tablet/TabletSetToggle.ets

@@ -13,35 +13,34 @@
  * limitations under the License.
  */
 
-import { Log } from '../../../utils/Log'
-import { SettingManager } from '../../../setting/SettingManager'
-import { SettingData, SettingGroupItem } from '../model/SettingData'
-import { Dispatch, OhCombinedState } from '../../../redux/store'
-import { getStore } from '../../../redux/store';
+import { Log } from '../../../utils/Log';
+import { SettingManager } from '../../../setting/SettingManager';
+import { SettingData, SettingGroupItem } from '../model/SettingData';
+import { Dispatch, getStore, OhCombinedState } from '../../../redux/store';
 
 class StateStruct {
   mode: string = ''
 }
 
 class SetToggleDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export struct TabletSetToggle {
-  private TAG: string = '[TabletSetToggle]:'
   @Link settingsList: SettingGroupItem[]
   @State isOn: boolean = false
+  @State generalStatusValue: boolean = false
+  @State state: StateStruct = new StateStruct()
+  private TAG: string = '[TabletSetToggle]:'
   private itemValue: SettingData = new SettingData();
   // private getToggleStatus: Promise<string>
   private WH_100_100: string = "100%"
   private settingManager = SettingManager.getInstance()
-  @State generalStatusValue: boolean = false
-  @State state: StateStruct = new StateStruct()
   private mAction: SetToggleDispatcher = new SetToggleDispatcher();
 
   aboutToAppear() {
@@ -95,7 +94,8 @@ export struct TabletSetToggle {
                 .opacity($r('sys.float.ohos_id_alpha_content_secondary'))
             }.margin({
               top: $r('sys.float.ohos_id_text_margin_vertical'),
-              left: 40 })
+              left: 40
+            })
           }
         }
         .layoutWeight(1)
@@ -119,7 +119,12 @@ export struct TabletSetToggle {
         }
         .margin({ left: $r('sys.float.ohos_id_card_margin_end') })
       }
-      .padding({ left: 12, right: 12, top: 4, bottom: 4 })
+      .padding({
+        left: 12,
+        right: 12,
+        top: 4,
+        bottom: 4
+      })
     }
     .height(this.itemValue?.description ? 72 : 56)
     .width(this.WH_100_100)

common/src/main/ets/default/featurecommon/settingview/tablet/TabletSettingItem.ets

@@ -17,19 +17,20 @@ import { SettingManager } from '../../../setting/SettingManager'
 import { Log } from '../../../utils/Log'
 import { TabletSetResolution } from './TabletSetResolution'
 import { TabletSetToggle } from './TabletSetToggle'
-import { BaseData } from '../model/BaseData'
 import { SettingData, SettingGroupItem } from '../model/SettingData'
 
 @Component
 export struct TabletSettingItem {
-  private TAG: string = '[TabletSettingItem]:'
   @Link settingsList: SettingGroupItem[]
   @Link closeFlag: Boolean
+  private TAG: string = '[TabletSettingItem]:'
   private item: SettingGroupItem = new SettingGroupItem();
   private index: number = 0
   private settingsListIndex: number = 0
-  private getPhotoValue: Promise<string> = new Promise(() => {});
-  private getVideoValue: Promise<string> = new Promise(() => {});
+  private getPhotoValue: Promise<string> = new Promise(() => {
+  });
+  private getVideoValue: Promise<string> = new Promise(() => {
+  });
   private WH_100_100: string = "100%"
   private settingManager = SettingManager.getInstance()
 
@@ -40,15 +41,19 @@ export struct TabletSettingItem {
   }
 
   build() {
-    Flex({ direction: FlexDirection.Column,
+    Flex({
+      direction: FlexDirection.Column,
       alignItems: ItemAlign.Center,
-      justifyContent: FlexAlign.SpaceBetween }) {
+      justifyContent: FlexAlign.SpaceBetween
+    }) {
       Column() {
         Row() {
           Text(this.item.settingTitle)
-            .margin({ top: $r('app.float.margin_value_20'),
+            .margin({
+              top: $r('app.float.margin_value_20'),
               left: $r('sys.float.ohos_id_card_margin_start'),
-              bottom: $r('app.float.margin_value_8') })
+              bottom: $r('app.float.margin_value_8')
+            })
             .fontColor($r('app.color.font_color_FFFFFF'))
             .opacity($r('app.float.opacity_6'))
             .fontSize($r('app.float.font_14'))
@@ -83,7 +88,12 @@ export struct TabletSettingItem {
           })
         }
         .listDirection(Axis.Vertical)
-        .divider({ strokeWidth: 0.5, color: '#33FFFFFF', startMargin: 56, endMargin: 12 })
+        .divider({
+          strokeWidth: 0.5,
+          color: '#33FFFFFF',
+          startMargin: 56,
+          endMargin: 12
+        })
         .borderRadius($r('sys.float.ohos_id_corner_radius_card'))
         .backgroundColor('#202224')
         .padding({ top: 4, bottom: 4 })

common/src/main/ets/default/featurecommon/shutterbutton/ShutterButton.ets

@@ -16,8 +16,7 @@
 import router from '@system.router';
 import image from '@ohos.multimedia.image';
 import { Log } from '../../utils/Log';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 import { Action } from '../../redux/actions/Action';
 import { EventBus } from '../../worker/eventbus/EventBus';
 import { EventBusManager } from '../../worker/eventbus/EventBusManager';
@@ -42,8 +41,6 @@ class StateStruct {
 
 
 class ShutterButtonDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -89,6 +86,8 @@ class ShutterButtonDispatcher {
   public changeTimeLapse(isShowtimeLapse: boolean): void {
     this.mDispatch(Action.changeTimeLapse(isShowtimeLapse));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 class ModeStruct {
@@ -102,13 +101,13 @@ class UpdateThumbnailStruct {
 
 @Component
 export struct ShutterButton {
-  private TAG: string = '[ShutterButton]:';
-  private appEventBus: EventBus = EventBusManager.getInstance().getEventBus();
-  private settingManager = SettingManager.getInstance();
   type: ButtonType = ButtonType.Capsule;
   stateEffect: boolean = false;
   @State state: StateStruct = new StateStruct();
   @State captureBtnScale: number = 1;
+  private TAG: string = '[ShutterButton]:';
+  private appEventBus: EventBus = EventBusManager.getInstance().getEventBus();
+  private settingManager = SettingManager.getInstance();
   private mAction: ShutterButtonDispatcher = new ShutterButtonDispatcher();
 
   aboutToAppear() {
@@ -145,6 +144,122 @@ export struct ShutterButton {
     Log.info(`${this.TAG} aboutToDisappear X`);
   }
 
+  build() {
+    if (this.state.videoState === 'beforeTakeVideo') {
+      Stack({ alignContent: Alignment.Center }) {
+        if (this.state.mode === 'VIDEO') {
+          Image(this.state.shutterIcon)
+            .key(ComponentIdKeys.SHUTTER_VIDEO_1)
+            .width(76)
+            .aspectRatio(1)
+            .enabled(this.state.uiEnable)
+            .onTouch((event?: TouchEvent) => {
+              if (!event) {
+                return;
+              }
+              if (event.type === TouchType.Up) {
+                let timerLapse = this.settingManager.getTimeLapse()
+                Log.log(`${this.TAG} ShutterButton startRecording getValue= ${JSON.stringify(timerLapse)}`)
+                if (timerLapse && timerLapse.id !== Timer.RESOURCE_OFF.id) {
+                  Log.log('ShutterButton startRecording changeTimeLapse called')
+                  this.mAction.changeTimeLapse(true)
+                } else {
+                  Log.log('ShutterButton startRecording changeTimeLapse not called')
+                  this.mAction.startRecording()
+                }
+              }
+            })
+        } else {
+          Image($r('app.media.ic_circled')).fillColor(Color.White)
+          Image(this.state.shutterIcon)
+            .width(54)
+            .aspectRatio(1)
+            .fillColor(Color.White)
+            .key(ComponentIdKeys.SHUTTER_PHOTO_1)
+            .scale({ x: this.captureBtnScale, y: this.captureBtnScale, z: this.captureBtnScale })
+            .enabled(this.state.uiEnable)
+            .onTouch((event?: TouchEvent) => {
+              if (!event) {
+                return;
+              }
+              if (event.type === TouchType.Down) {
+                animateTo(
+                  { duration: 125, curve: Curve.Sharp, delay: 0 },
+                  () => {
+                    this.captureBtnScale = 0.85
+                  })
+              } else if (event.type === TouchType.Up) {
+                animateTo(
+                  {
+                    duration: 125,
+                    curve: Curve.Sharp,
+                    delay: 0,
+                    onFinish: () => {
+                      this.captureBtnScale = 1
+                    }
+                  },
+                  () => {
+                    this.captureBtnScale = 1
+                  })
+                let timerLapse = this.settingManager.getTimeLapse()
+                Log.log(`${this.TAG} ShutterButton start capture getValue= ${JSON.stringify(timerLapse)}`)
+                if (timerLapse && timerLapse.id !== Timer.RESOURCE_OFF.id) {
+                  Log.log('ShutterButton startRecording changeTimeLapse called')
+                  this.mAction.changeTimeLapse(true)
+                } else {
+                  Log.log('ShutterButton capture changeTimeLapse not called')
+                  this.mAction.capture()
+                }
+              }
+            })
+        }
+      }.width(76).aspectRatio(1).margin({ left: 48, right: 48 })
+    } else {
+      Column() {
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Column() {
+            Image($r('app.media.ic_video_end'))
+              .key(ComponentIdKeys.SHUTTER_VIDEO_END_1)
+              .width(20)
+              .aspectRatio(1)
+              .fillColor(Color.White)
+              .enabled(this.state.uiEnable)
+          }
+          .width(40)
+          .padding({ left: 10, right: 10 })
+          .margin({ right: 6 })
+          .enabled(this.state.uiEnable)
+          .onClick(() => {
+            this.mAction.stopRecording()
+          })
+
+          Column() {
+            if (this.state.videoState === 'startTakeVideo') {
+              Image($r('app.media.ic_video_recording'))
+                .width(20).aspectRatio(1).fillColor(Color.White)
+                .enabled(this.state.uiEnable)
+            } else if (this.state.videoState === 'pauseTakeVideo') {
+              Image($r('app.media.ic_video_pause')).width(20).aspectRatio(1).fillColor(Color.Red)
+                .enabled(this.state.uiEnable)
+            }
+          }
+          .width(40)
+          .padding({ left: 10, right: 10 })
+          .margin({ left: 6 })
+          .enabled(this.state.uiEnable)
+          .onClick(() => {
+            this.state.videoState === 'startTakeVideo' ? this.mAction.pauseRecording() : this.mAction.resumeRecording()
+          })
+        }.width('100%').height('100%')
+      }
+      .width(120)
+      .height(56)
+      .borderRadius(28)
+      .border({ width: 1, color: Color.White, style: BorderStyle.Solid })
+      .margin({ left: 24, right: 24 })
+    }
+  }
+
   private async onThumbnailUpdate(data: UpdateThumbnailStruct): Promise<void> {
     Log.info(`${this.TAG} onThumbnailUpdate data: ${JSON.stringify(data)} E`)
     Log.info(`${this.TAG} onThumbnailUpdate resourceUri= ${JSON.stringify(this.state.resourceUri)} E`)
@@ -192,103 +307,4 @@ export struct ShutterButton {
     }
     Log.info(`${this.TAG} refreshIcon X`);
   }
-
-  build() {
-    if (this.state.videoState === 'beforeTakeVideo') {
-      Stack({ alignContent: Alignment.Center }) {
-        if (this.state.mode === 'VIDEO') {
-          Image(this.state.shutterIcon)
-            .key(ComponentIdKeys.SHUTTER_VIDEO_1)
-            .width(76).aspectRatio(1).enabled(this.state.uiEnable)
-            .onTouch((event?: TouchEvent) => {
-              if (!event) {
-                return;
-              }
-              if (event.type === TouchType.Up) {
-                let timerLapse = this.settingManager.getTimeLapse()
-                Log.log(`${this.TAG} ShutterButton startRecording getValue= ${JSON.stringify(timerLapse)}`)
-                if (timerLapse && timerLapse.id !== Timer.RESOURCE_OFF.id) {
-                  Log.log('ShutterButton startRecording changeTimeLapse called')
-                  this.mAction.changeTimeLapse(true)
-                } else {
-                  Log.log('ShutterButton startRecording changeTimeLapse not called')
-                  this.mAction.startRecording()
-                }
-              }
-            })
-        } else {
-          Image($r('app.media.ic_circled')).fillColor(Color.White)
-          Image(this.state.shutterIcon).width(54).aspectRatio(1).fillColor(Color.White)
-            .key(ComponentIdKeys.SHUTTER_PHOTO_1)
-            .scale({ x: this.captureBtnScale, y: this.captureBtnScale, z: this.captureBtnScale })
-            .enabled(this.state.uiEnable)
-            .onTouch((event?: TouchEvent) => {
-              if (!event) {
-                return;
-              }
-              if (event.type === TouchType.Down) {
-                animateTo(
-                  { duration: 125, curve: Curve.Sharp, delay: 0 },
-                  () => { this.captureBtnScale = 0.85 })
-              } else if (event.type === TouchType.Up) {
-                animateTo(
-                  { duration: 125, curve: Curve.Sharp, delay: 0,
-                    onFinish: () => { this.captureBtnScale = 1 }},
-                  () => { this.captureBtnScale = 1 })
-                let timerLapse = this.settingManager.getTimeLapse()
-                Log.log(`${this.TAG} ShutterButton start capture getValue= ${JSON.stringify(timerLapse)}`)
-                if (timerLapse && timerLapse.id !== Timer.RESOURCE_OFF.id) {
-                  Log.log('ShutterButton startRecording changeTimeLapse called')
-                  this.mAction.changeTimeLapse(true)
-                } else {
-                  Log.log('ShutterButton capture changeTimeLapse not called')
-                  this.mAction.capture()
-                }
-              }
-            })
-        }
-      }.width(76).aspectRatio(1).margin({ left: 48, right: 48 })
-    } else {
-      Column() {
-        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Column() {
-            Image($r('app.media.ic_video_end'))
-              .key(ComponentIdKeys.SHUTTER_VIDEO_END_1)
-              .width(20)
-              .aspectRatio(1)
-              .fillColor(Color.White)
-              .enabled(this.state.uiEnable)
-          }
-          .width(40)
-          .padding({ left: 10, right: 10 })
-          .margin({ right: 6 })
-          .enabled(this.state.uiEnable)
-          .onClick(() => {
-            this.mAction.stopRecording()
-          })
-
-          Column() {
-            if (this.state.videoState === 'startTakeVideo') {
-              Image($r('app.media.ic_video_recording'))
-                .width(20).aspectRatio(1).fillColor(Color.White)
-                .enabled(this.state.uiEnable)
-            } else if (this.state.videoState === 'pauseTakeVideo') {
-              Image($r('app.media.ic_video_pause')).width(20).aspectRatio(1).fillColor(Color.Red)
-                .enabled(this.state.uiEnable)
-            }
-          }
-          .width(40)
-          .padding({ left: 10, right: 10 })
-          .margin({ left: 6 })
-          .enabled(this.state.uiEnable)
-          .onClick(() => {
-              this.state.videoState === 'startTakeVideo' ? this.mAction.pauseRecording() : this.mAction.resumeRecording()
-          })
-        }.width('100%').height('100%')
-      }
-      .width(120).height(56).borderRadius(28)
-      .border({ width: 1, color: Color.White, style: BorderStyle.Solid })
-      .margin({ left: 24, right: 24 })
-    }
-  }
 }

common/src/main/ets/default/featurecommon/shutterbutton/ShutterButtonLand.ets

@@ -19,8 +19,7 @@ import { Action } from '../../redux/actions/Action';
 import { Log } from '../../utils/Log';
 import { EventBus } from '../../worker/eventbus/EventBus';
 import { EventBusManager } from '../../worker/eventbus/EventBusManager';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 import { SettingManager } from '../../setting/SettingManager';
 import Timer from '../../setting/settingitem/Timer';
 import { ComponentPosition } from '../../utils/ComponentPosition';
@@ -42,8 +41,6 @@ class StateStruct {
 }
 
 class ShutterButtonDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -89,6 +86,8 @@ class ShutterButtonDispatcher {
   public changeTimeLapse(isShowtimeLapse: boolean): void {
     this.mDispatch(Action.changeTimeLapse(isShowtimeLapse));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 class ScreenSizeType {
@@ -107,15 +106,15 @@ class UpdateThumbnailStruct {
 
 @Component
 export struct ShutterButtonLand {
-  private TAG: string = '[ShutterButtonLand]:';
-  private appEventBus: EventBus = EventBusManager.getInstance().getEventBus();
-  private settingManager = SettingManager.getInstance();
-  private lastTime = 0;
   @Link screenSize: ScreenSizeType;
   type: ButtonType = ButtonType.Capsule;
   stateEffect: boolean = false;
   @State state: StateStruct = new StateStruct();
   @State captureBtnScale: number = 1;
+  private TAG: string = '[ShutterButtonLand]:';
+  private appEventBus: EventBus = EventBusManager.getInstance().getEventBus();
+  private settingManager = SettingManager.getInstance();
+  private lastTime = 0;
   private mAction: ShutterButtonDispatcher = new ShutterButtonDispatcher();
 
   aboutToAppear(): void {
@@ -152,46 +151,6 @@ export struct ShutterButtonLand {
     Log.info(`${this.TAG} aboutToDisappear X`);
   }
 
-  private async onThumbnailUpdate(data: UpdateThumbnailStruct): Promise<void> {
-    Log.info(`${this.TAG} onThumbnailUpdate data: ${JSON.stringify(data)} E`)
-    Log.info(`${this.TAG} onThumbnailUpdate resourceUri= ${JSON.stringify(this.state.resourceUri)} E`);
-    Log.info(`${this.TAG} onThumbnailUpdate isThirdPartyCall= ${this.state.isThirdPartyCall} E`)
-    Log.info(`${this.TAG} onThumbnailUpdate videoUri= ${this.state.videoUri} E`);
-    if (this.state.isThirdPartyCall) {
-      Log.info(`${this.TAG} onThumbnailUpdate start router to ThirdPreviewView`)
-      router.push({
-        uri: "pages/ThirdPreviewView",
-        params: {
-          width: this.state.xComponentWidth,
-          height: this.state.xComponentHeight,
-          mode: this.state.mode,
-          uri: this.state.resourceUri,
-          videoUri: this.state.videoUri,
-          callBundleName: GlobalContext.get().getCameraAbilityWant()?.parameters?.callBundleName
-        }
-      })
-    }
-    Log.info(`${this.TAG} onThumbnailUpdate this.state.thumbnail: ${JSON.stringify(this.state.thumbnail)} X`)
-  }
-
-  private async changeShutterIcon(data: ModeStruct): Promise<void> {
-    Log.info(`${this.TAG} resetShutterIcon E`);
-    this.refreshIcon(data.mode)
-    Log.info(`${this.TAG} resetShutterIcon X`);
-  }
-
-  private async refreshIcon(mode: string): Promise<void> {
-    Log.info(`${this.TAG} refreshIcon E`);
-    if (mode === 'PHOTO') {
-      this.mAction.updateShutterIcon($r('app.media.ic_circled_filled'))
-    } else if (mode === 'VIDEO') {
-      this.mAction.updateShutterIcon($r('app.media.take_video_normal'))
-    } else {
-      this.mAction.updateShutterIcon($r('app.media.ic_circled_filled'))
-    }
-    Log.info(`${this.TAG} refreshIcon X`);
-  }
-
   build() {
     if (this.state.videoState === 'beforeTakeVideo') {
       Stack({ alignContent: Alignment.Center }) {
@@ -226,10 +185,14 @@ export struct ShutterButtonLand {
                   })
               } else if (event.type === TouchType.Up) {
                 animateTo(
-                  { duration: 125, curve: Curve.Sharp, delay: 0,
+                  {
+                    duration: 125,
+                    curve: Curve.Sharp,
+                    delay: 0,
                     onFinish: () => {
                       this.captureBtnScale = 1
-                    } },
+                    }
+                  },
                   () => {
                     this.captureBtnScale = 1
                   })
@@ -250,8 +213,10 @@ export struct ShutterButtonLand {
             })
         }
       }.width(76).aspectRatio(1).margin({
-        top: ComponentPosition.getShutterButtonMargin(this.screenSize.width, this.screenSize.height, this.state.xComponentHeight),
-        bottom: ComponentPosition.getShutterButtonMargin(this.screenSize.width, this.screenSize.height, this.state.xComponentHeight)
+        top: ComponentPosition.getShutterButtonMargin(this.screenSize.width, this.screenSize.height,
+          this.state.xComponentHeight),
+        bottom: ComponentPosition.getShutterButtonMargin(this.screenSize.width, this.screenSize.height,
+          this.state.xComponentHeight)
       })
     } else {
       Column() {
@@ -295,4 +260,44 @@ export struct ShutterButtonLand {
       .margin({ top: 26, bottom: 26 })
     }
   }
+
+  private async onThumbnailUpdate(data: UpdateThumbnailStruct): Promise<void> {
+    Log.info(`${this.TAG} onThumbnailUpdate data: ${JSON.stringify(data)} E`)
+    Log.info(`${this.TAG} onThumbnailUpdate resourceUri= ${JSON.stringify(this.state.resourceUri)} E`);
+    Log.info(`${this.TAG} onThumbnailUpdate isThirdPartyCall= ${this.state.isThirdPartyCall} E`)
+    Log.info(`${this.TAG} onThumbnailUpdate videoUri= ${this.state.videoUri} E`);
+    if (this.state.isThirdPartyCall) {
+      Log.info(`${this.TAG} onThumbnailUpdate start router to ThirdPreviewView`)
+      router.push({
+        uri: "pages/ThirdPreviewView",
+        params: {
+          width: this.state.xComponentWidth,
+          height: this.state.xComponentHeight,
+          mode: this.state.mode,
+          uri: this.state.resourceUri,
+          videoUri: this.state.videoUri,
+          callBundleName: GlobalContext.get().getCameraAbilityWant()?.parameters?.callBundleName
+        }
+      })
+    }
+    Log.info(`${this.TAG} onThumbnailUpdate this.state.thumbnail: ${JSON.stringify(this.state.thumbnail)} X`)
+  }
+
+  private async changeShutterIcon(data: ModeStruct): Promise<void> {
+    Log.info(`${this.TAG} resetShutterIcon E`);
+    this.refreshIcon(data.mode)
+    Log.info(`${this.TAG} resetShutterIcon X`);
+  }
+
+  private async refreshIcon(mode: string): Promise<void> {
+    Log.info(`${this.TAG} refreshIcon E`);
+    if (mode === 'PHOTO') {
+      this.mAction.updateShutterIcon($r('app.media.ic_circled_filled'))
+    } else if (mode === 'VIDEO') {
+      this.mAction.updateShutterIcon($r('app.media.take_video_normal'))
+    } else {
+      this.mAction.updateShutterIcon($r('app.media.ic_circled_filled'))
+    }
+    Log.info(`${this.TAG} refreshIcon X`);
+  }
 }

common/src/main/ets/default/featurecommon/tabbar/TabBar.ets

@@ -14,8 +14,7 @@
  */
 
 import { Log } from '../../utils/Log';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 import { Action } from '../../redux/actions/Action';
 
 class StateStruct {
@@ -23,8 +22,6 @@ class StateStruct {
 }
 
 class TabBarDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -32,14 +29,15 @@ class TabBarDispatcher {
   public showSettingView(isShowSettingView: boolean): void {
     this.mDispatch(Action.showSettingView(isShowSettingView));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 
 @Component
 export struct TabBar {
-  private TAG: string = '[TabBar]';
   @State state: StateStruct = new StateStruct();
-  private onBackClicked: Function = () => {};
+  private TAG: string = '[TabBar]';
   private mAction: TabBarDispatcher = new TabBarDispatcher();
 
   aboutToAppear(): void {
@@ -59,6 +57,7 @@ export struct TabBar {
       Column() {
         //        TabBarOther()
       }.width('40%').height('100%')
+
       Column() {
         if (this.state.isThirdPartyCall) {
           Row() {
@@ -68,10 +67,11 @@ export struct TabBar {
                 this.onBackClicked()
               })
           }.width(48).height(48)
-          .padding({left: 12})
+          .padding({ left: 12 })
           .margin({ bottom: 12 })
         }
       }.width('40%').height('100%')
+
       Column() {
         Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
           Image($r('app.media.setting')).width(24).height(24)
@@ -81,4 +81,7 @@ export struct TabBar {
       })
     }.width('100%').height('100%')
   }
+
+  private onBackClicked: Function = () => {
+  };
 }

common/src/main/ets/default/featurecommon/tabbar/TabBarLand.ets

@@ -17,8 +17,7 @@ import { Action } from '../../redux/actions/Action'
 import { Log } from '../../utils/Log'
 import { EventBus } from '../../worker/eventbus/EventBus'
 import { EventBusManager } from '../../worker/eventbus/EventBusManager'
-import { Dispatch, OhCombinedState } from '../../redux/store'
-import { getStore } from '../../redux/store'
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store'
 import ReportUtil from '../../utils/ReportUtil'
 
 class StateStruct {
@@ -31,8 +30,6 @@ class ScreenSizeType {
 }
 
 class TabBarDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -40,18 +37,18 @@ class TabBarDispatcher {
   public showSettingView(isShowSettingView: boolean): void {
     this.mDispatch(Action.showSettingView(isShowSettingView));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export struct TabBarLand {
-  private TAG: string = '[TabBarLand]';
   @State state: StateStruct = new StateStruct();
   @State opacityTabBar: number = 0;
   @State isShowTabBarOther: boolean = false;
   @Link screenSize: ScreenSizeType;
-  private onBackClicked: Function = () => {
-  };
   appEventBus: EventBus = EventBusManager.getInstance().getEventBus();
+  private TAG: string = '[TabBarLand]';
   private mAction: TabBarDispatcher = new TabBarDispatcher();
 
   aboutToAppear(): void {
@@ -91,4 +88,7 @@ export struct TabBarLand {
       .position(this.state.isThirdPartyCall ? { x: 0, y: 12 } : { x: 0, y: this.screenSize.height - 144 })
     }.width(48).height('100%')
   }
+
+  private onBackClicked: Function = () => {
+  };
 }

common/src/main/ets/default/featurecommon/thumbnail/ThumbnailView.ets

@@ -14,8 +14,7 @@
  */
 
 import { Log } from '../../utils/Log';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 import { Action } from '../../redux/actions/Action';
 import { EventBus } from '../../worker/eventbus/EventBus';
 import { EventBusManager } from '../../worker/eventbus/EventBusManager';
@@ -42,60 +41,26 @@ class StartAbilityParameterStruct {
 }
 
 class ThumbnailViewDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export struct ThumbnailView {
-  private TAG: string = '[ThumbnailView]:'
-  private appEventBus: EventBus = EventBusManager.getInstance().getEventBus()
   @State thumbnailBorder: BorderOptions = {};
   @State state: StateStruct = new StateStruct()
   @State thumbnail: Resource | PixelMap = $r('app.media.ic_camera_thumbnail_default_white')
   @State hasThumbnail: boolean = false
   @State scaleValue: number = 1
   @State tempOpacity: number = 1
+  private TAG: string = '[ThumbnailView]:'
+  private appEventBus: EventBus = EventBusManager.getInstance().getEventBus()
   private cameraService = CameraService.getInstance()
   private mAction: ThumbnailViewDispatcher = new ThumbnailViewDispatcher();
 
-  private async onThumbnailUpdate(data: UpdateThumbnailStruct): Promise<void> {
-    Log.info(`${this.TAG} onThumbnailUpdate data: ${JSON.stringify(data)} E`)
-    this.thumbnail = (data.thumbnail == null ? $r('app.media.ic_camera_thumbnail_default_white') : data.thumbnail)
-    this.hasThumbnail = data.thumbnail != undefined
-    if (this.hasThumbnail) {
-      this.thumbnailBorder = { width: 1, color: Color.White, style: BorderStyle.Solid }
-    } else {
-      this.thumbnailBorder = { width: 0 }
-    }
-    this.scaleValue = 1.5
-    this.tempOpacity = 0.0
-    animateTo({ duration: 100, curve: Curve.Sharp }, () => {
-      this.tempOpacity = 1
-    })
-    animateTo({ duration: 300, curve: Curve.Sharp }, () => {
-      this.scaleValue = 1
-    })
-    Log.info(`${this.TAG} onThumbnailUpdate this.state.thumbnail: ${JSON.stringify(this.thumbnail)} X`)
-  }
-
-  private async onThumbnailLoad(data: ThumbnailStruct): Promise<void> {
-    Log.info(`${this.TAG} onThumbnailLoad data: ${JSON.stringify(data)} E`)
-    this.thumbnail = (data.thumbnail == null ? $r('app.media.ic_camera_thumbnail_default_white') : data.thumbnail)
-    this.hasThumbnail = data.thumbnail != undefined
-    if (this.hasThumbnail) {
-      this.thumbnailBorder = { width: 1, color: Color.White, style: BorderStyle.Solid }
-    } else {
-      this.thumbnailBorder = { width: 0 }
-    }
-    this.scaleValue = 1
-    this.tempOpacity = 1
-    Log.info(`${this.TAG} onThumbnailLoad this.state.thumbnail: ${JSON.stringify(this.thumbnail)} X`)
-  }
-
   aboutToAppear() {
     Log.info(`${this.TAG} aboutToAppear E`)
     getStore().subscribe((state: OhCombinedState) => {
@@ -143,6 +108,40 @@ export struct ThumbnailView {
     .scale({ x: this.scaleValue, y: this.scaleValue })
   }
 
+  private async onThumbnailUpdate(data: UpdateThumbnailStruct): Promise<void> {
+    Log.info(`${this.TAG} onThumbnailUpdate data: ${JSON.stringify(data)} E`)
+    this.thumbnail = (data.thumbnail == null ? $r('app.media.ic_camera_thumbnail_default_white') : data.thumbnail)
+    this.hasThumbnail = data.thumbnail != undefined
+    if (this.hasThumbnail) {
+      this.thumbnailBorder = { width: 1, color: Color.White, style: BorderStyle.Solid }
+    } else {
+      this.thumbnailBorder = { width: 0 }
+    }
+    this.scaleValue = 1.5
+    this.tempOpacity = 0.0
+    animateTo({ duration: 100, curve: Curve.Sharp }, () => {
+      this.tempOpacity = 1
+    })
+    animateTo({ duration: 300, curve: Curve.Sharp }, () => {
+      this.scaleValue = 1
+    })
+    Log.info(`${this.TAG} onThumbnailUpdate this.state.thumbnail: ${JSON.stringify(this.thumbnail)} X`)
+  }
+
+  private async onThumbnailLoad(data: ThumbnailStruct): Promise<void> {
+    Log.info(`${this.TAG} onThumbnailLoad data: ${JSON.stringify(data)} E`)
+    this.thumbnail = (data.thumbnail == null ? $r('app.media.ic_camera_thumbnail_default_white') : data.thumbnail)
+    this.hasThumbnail = data.thumbnail != undefined
+    if (this.hasThumbnail) {
+      this.thumbnailBorder = { width: 1, color: Color.White, style: BorderStyle.Solid }
+    } else {
+      this.thumbnailBorder = { width: 0 }
+    }
+    this.scaleValue = 1
+    this.tempOpacity = 1
+    Log.info(`${this.TAG} onThumbnailLoad this.state.thumbnail: ${JSON.stringify(this.thumbnail)} X`)
+  }
+
   private buildCameraAbilityWant(parameter: Record<string, string>): Want {
     let res: Want = {
       parameters: parameter,

common/src/main/ets/default/featurecommon/timelapseview/TimeLapseView.ets

@@ -13,10 +13,9 @@
  * limitations under the License.
  */
 
-import { BusinessError } from "@ohos.base";
+import { BusinessError } from '@ohos.base';
 import { Log } from '../../utils/Log';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 import { Action } from '../../redux/actions/Action';
 import { SettingManager } from '../../setting/SettingManager';
 import Timer from '../../setting/settingitem/Timer';
@@ -29,8 +28,6 @@ class StateStruct {
 }
 
 class TimeLapseViewDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -50,6 +47,8 @@ class TimeLapseViewDispatcher {
     this.mDispatch(Action.updateBigVideoTimerVisible(true));
     this.mDispatch(Action.updateScreenStatus(true));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 class KeepScreenStruct {
@@ -58,30 +57,14 @@ class KeepScreenStruct {
 
 @Component
 export struct TimeLapseView {
-  private TAG: string = '[TimeLapseView]:'
-  private timer: number = 0
-  private settingManager = SettingManager.getInstance()
   appEventBus: EventBus = EventBusManager.getInstance().getEventBus()
   @State state: StateStruct = new StateStruct()
   @State timerLapse: number = 0
+  private TAG: string = '[TimeLapseView]:'
+  private timer: number = 0
+  private settingManager = SettingManager.getInstance()
   private mAction: TimeLapseViewDispatcher = new TimeLapseViewDispatcher();
 
-  private onKeepScreen(data: KeepScreenStruct): void {
-    Log.info(`${this.TAG} onKeepScreen E`)
-    if (data) {
-      GlobalContext.get()
-        .getCameraWinClass()
-        .setKeepScreenOn(data.isKeepScreenOn)
-        .then(() => {
-          Log.info('Succeeded in setting the screen to be always on');
-        })
-        .catch((err: BusinessError) => {
-          Log.error('Failed to set the screen to be always on. Cause: ' + JSON.stringify(err));
-        });
-    }
-    Log.info(`${this.TAG} onKeepScreen X`)
-  }
-
   aboutToAppear() {
     Log.info(`${this.TAG} aboutToAppear E`)
     getStore().subscribe((state: OhCombinedState) => {
@@ -144,4 +127,20 @@ export struct TimeLapseView {
         .textAlign(TextAlign.Center)
     }.width('100%').height('100%')
   }
+
+  private onKeepScreen(data: KeepScreenStruct): void {
+    Log.info(`${this.TAG} onKeepScreen E`)
+    if (data) {
+      GlobalContext.get()
+        .getCameraWinClass()
+        .setKeepScreenOn(data.isKeepScreenOn)
+        .then(() => {
+          Log.info('Succeeded in setting the screen to be always on');
+        })
+        .catch((err: BusinessError) => {
+          Log.error('Failed to set the screen to be always on. Cause: ' + JSON.stringify(err));
+        });
+    }
+    Log.info(`${this.TAG} onKeepScreen X`)
+  }
 }

common/src/main/ets/default/featurecommon/zoomview/ZoomText.ets

@@ -14,25 +14,24 @@
  */
 
 import { Log } from '../../utils/Log';
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 
 class StateStruct {
   zoomRatio: number = 1;
 }
 
 class ZoomTextDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export struct ZoomText {
-  private TAG: string = '[ZoomText]'
   @Link state: StateStruct
+  private TAG: string = '[ZoomText]'
   private mAction: ZoomTextDispatcher = new ZoomTextDispatcher();
 
   aboutToAppear() {

common/src/main/ets/default/featurecommon/zoomview/ZoomView.ets

@@ -13,8 +13,7 @@
  * limitations under the License.
  */
 
-import { Dispatch, OhCombinedState, Unsubscribe } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 import { Action } from '../../redux/actions/Action';
 import { EventBus } from '../../worker/eventbus/EventBus';
 import { EventBusManager } from '../../worker/eventbus/EventBusManager';
@@ -36,8 +35,6 @@ class StateStruct {
 }
 
 class ZoomViewDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -53,6 +50,8 @@ class ZoomViewDispatcher {
   public updateShowZoomLabelValue(flag: boolean): void {
     this.mDispatch(Action.updateShowZoomLabelValue(flag));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 class ZoomRatioStruct {
@@ -65,10 +64,10 @@ class VideoStateStruct {
 
 @Component
 export struct ZoomView {
-  private appEventBus: EventBus = EventBusManager.getInstance().getEventBus()
   @State state: StateStruct = new StateStruct();
   @State offsetX: number = 0
   @State triggerRebuildNum: number = 0
+  private appEventBus: EventBus = EventBusManager.getInstance().getEventBus()
   private mAction: ZoomViewDispatcher = new ZoomViewDispatcher();
   private notTakeVideoExtCanvasWidth: number = 360
   private takingVideoExtCanvasWidth: number = 196
@@ -81,11 +80,11 @@ export struct ZoomView {
   private takingVideoExtCanvasCtx: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.canvasSettings)
   private foldCanvasCtx: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.canvasSettings)
   private notTakeVideoExtOffCanvasCtx: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(
-  this.notTakeVideoExtCanvasWidth, this.canvasHeight, this.canvasSettings)
+    this.notTakeVideoExtCanvasWidth, this.canvasHeight, this.canvasSettings)
   private takingVideoExtOffCanvasCxt: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(
-  this.takingVideoExtCanvasWidth, this.canvasHeight, this.canvasSettings)
+    this.takingVideoExtCanvasWidth, this.canvasHeight, this.canvasSettings)
   private foldOffCanvasCtx: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(
-  this.foldCanvasWidth, this.canvasHeight, this.canvasSettings)
+    this.foldCanvasWidth, this.canvasHeight, this.canvasSettings)
   private lpgTimer: number = 0
   private pgTimer: number = 0
   private lpgExp: boolean = false
@@ -120,12 +119,245 @@ export struct ZoomView {
     this.appEventBus.off(Action.ACTION_UPDATE_VIDEO_STATE, (data: VideoStateStruct) => this.updateZoomState(data))
   }
 
+  build() {
+    Stack({ alignContent: Alignment.Top }) {
+      Stack({ alignContent: Alignment.Top })
+        .width(this.offsetX + this.touchedOffsetX + this.state.zoomRatio)
+        .height(this.triggerRebuildNum)
+        .visibility(Visibility.None)
+      if (this.getCurrentCanvasType() === SHOW_NOT_TAKE_VIDEO_CANVAS) {
+        Canvas(this.notTakeVideoExtCanvasCtx)
+          .width(this.notTakeVideoExtCanvasWidth)
+          .height(this.canvasHeight)
+          .onReady(() => {
+            this.notTakeVideoExtCanvasCtx.clearRect(0, 0, this.notTakeVideoExtCanvasWidth, this.canvasHeight)
+            this.notTakeVideoExtOffCanvasCtx.clearRect(0, 0, this.notTakeVideoExtCanvasWidth, this.canvasHeight)
+            this.notTakeVideoExtOffCanvasCtx.strokeStyle = '#ffffff'
+            this.notTakeVideoExtOffCanvasCtx.fillStyle = '#ffffff'
+            this.notTakeVideoExtOffCanvasCtx.lineWidth = 1.5
+            this.notTakeVideoExtOffCanvasCtx.beginPath()
+            this.notTakeVideoExtOffCanvasCtx.arc(this.getZoomBtnCenterX(), this.canvasHeight / 2,
+              this.getZoomBtnRadius(), 0, 6.28)
+            this.notTakeVideoExtOffCanvasCtx.stroke()
+            if (this.state.showZoomLabelValue) {
+              this.notTakeVideoExtOffCanvasCtx.font = `bold ${vp2px(11)}px`
+              this.notTakeVideoExtOffCanvasCtx.textAlign = 'center'
+              this.notTakeVideoExtOffCanvasCtx.fillText(this.getZoomText(), this.getZoomBtnCenterX(),
+                this.canvasHeight / 2 + 5)
+            } else {
+              this.notTakeVideoExtOffCanvasCtx.beginPath()
+              this.notTakeVideoExtOffCanvasCtx.arc(this.getZoomBtnCenterX(), this.canvasHeight / 2,
+                this.centerDotRadius, 0, 6.28)
+              this.notTakeVideoExtOffCanvasCtx.fill()
+            }
+
+            let spotCount =
+              (this.notTakeVideoExtCanvasWidth - this.getPadding() * 2 - this.mainDotRadius * 4 - this.dotSpacing) /
+                (this.dotSpacing + this.secDotRadius * 2) + 2
+            for (let i = 0; i < spotCount; i++) {
+              let spotCenter = 0
+              let spotRadius = 0
+              if (i === 0) {
+                spotRadius = this.mainDotRadius
+                spotCenter = this.getPadding() + spotRadius
+                this.notTakeVideoExtOffCanvasCtx.font = `bold ${vp2px(11)}px`
+                this.notTakeVideoExtOffCanvasCtx.textAlign = 'center'
+                this.notTakeVideoExtOffCanvasCtx.fillText(`${this.state.minZoomRatio}x`, spotCenter,
+                  this.canvasHeight / 2 - (!this.state.showZoomLabelValue ? 26 : 24))
+              } else if (i === spotCount - 1) {
+                spotRadius = this.mainDotRadius
+                spotCenter = this.notTakeVideoExtCanvasWidth - this.getPadding() - spotRadius
+                this.notTakeVideoExtOffCanvasCtx.font = `bold ${vp2px(11)}px`
+                this.notTakeVideoExtOffCanvasCtx.textAlign = 'center'
+                this.notTakeVideoExtOffCanvasCtx.fillText(`${this.state.maxZoomRatio}x`, spotCenter,
+                  this.canvasHeight / 2 - (!this.state.showZoomLabelValue ? 26 : 24))
+              } else {
+                spotRadius = this.secDotRadius
+                spotCenter =
+                  this.getPadding() + this.mainDotRadius + (2 * i - 1) * this.secDotRadius + i * this.dotSpacing
+                this.notTakeVideoExtOffCanvasCtx.globalAlpha = 0.2
+              }
+              if (spotCenter < this.getZoomBtnCenterX() - this.getZoomBtnRadius() ||
+                spotCenter > this.getZoomBtnCenterX() + this.getZoomBtnRadius()) {
+                this.notTakeVideoExtOffCanvasCtx.beginPath()
+                this.notTakeVideoExtOffCanvasCtx.arc(spotCenter, this.canvasHeight / 2, spotRadius, 0, 6.28)
+                this.notTakeVideoExtOffCanvasCtx.fill()
+              }
+              this.notTakeVideoExtOffCanvasCtx.globalAlpha = 1
+            }
+            this.notTakeVideoExtCanvasCtx.transferFromImageBitmap(this.notTakeVideoExtOffCanvasCtx.transferToImageBitmap())
+          })
+          .gesture(GestureGroup(GestureMode.Parallel,
+            PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Horizontal })
+              .onActionStart(() => this.pgOnActionStart())
+              .onActionUpdate((event?: GestureEvent) => {
+                if (event) {
+                  return this.pgOnActionUpdate(event);
+                }
+              })
+              .onActionEnd(() => this.pgOnActionEnd())))
+          .onTouch((event?: TouchEvent) => {
+            if (event) {
+              return this.mOnTouch(event);
+            }
+          })
+      } else if (this.getCurrentCanvasType() === SHOW_TAKING_VIDEO_CANVAS) {
+        Row() {
+          Image($r('app.media.ic_camera_public_focus_ev_bright_subtract'))
+            .width(24)
+            .height(24)
+            .fillColor(Color.White)
+            .onTouch((event?: TouchEvent) => this.subtractTouched(event))
+            .gesture(
+              GestureGroup(
+                GestureMode.Parallel,
+                LongPressGesture({ repeat: true })
+                  .onAction((event?: GestureEvent) => this.subtractLongOnAction(event))
+                  .onActionEnd(() => this.subtractLongOnActionEnd()),
+              )
+            )
+          Canvas(this.takingVideoExtCanvasCtx)
+            .width(this.takingVideoExtCanvasWidth)
+            .height(this.canvasHeight)
+            .onReady(() => {
+              this.takingVideoExtCanvasCtx.clearRect(0, 0, this.takingVideoExtCanvasWidth, this.canvasHeight)
+              this.takingVideoExtOffCanvasCxt.clearRect(0, 0, this.takingVideoExtCanvasWidth, this.canvasHeight)
+              this.takingVideoExtOffCanvasCxt.strokeStyle = '#ffffff'
+              this.takingVideoExtOffCanvasCxt.fillStyle = '#ffffff'
+              this.takingVideoExtOffCanvasCxt.lineWidth = 1.5
+              this.takingVideoExtOffCanvasCxt.beginPath()
+              this.takingVideoExtOffCanvasCxt.arc(this.getZoomBtnCenterX(), this.canvasHeight / 2,
+                this.getZoomBtnRadius(), 0, 6.28)
+              this.takingVideoExtOffCanvasCxt.stroke()
+              if (this.state.isShowZoomText) {
+                this.takingVideoExtOffCanvasCxt.beginPath()
+                this.takingVideoExtOffCanvasCxt.arc(this.getZoomBtnCenterX(), this.canvasHeight / 2,
+                  this.centerDotRadius, 0, 6.28)
+                this.takingVideoExtOffCanvasCxt.fill()
+              } else {
+                this.takingVideoExtOffCanvasCxt.font = `bold ${vp2px(11)}px`
+                this.takingVideoExtOffCanvasCxt.textAlign = 'center'
+                this.takingVideoExtOffCanvasCxt.fillText(this.getZoomText(), this.getZoomBtnCenterX(),
+                  this.canvasHeight / 2 + 5)
+              }
+
+              let spotCount = 30
+              for (let i = 0; i < spotCount; i++) {
+                let spotCenter = 0
+                let spotRadius = 0
+                spotRadius = this.secDotRadius
+                spotCenter = this.getPadding() + (2 * i + 1) * this.secDotRadius + i * this.dotSpacing
+                this.takingVideoExtOffCanvasCxt.globalAlpha = 0.2
+                if (spotCenter < this.getZoomBtnCenterX() - this.getZoomBtnRadius() ||
+                  spotCenter > this.getZoomBtnCenterX() + this.getZoomBtnRadius()) {
+                  this.takingVideoExtOffCanvasCxt.beginPath()
+                  this.takingVideoExtOffCanvasCxt.arc(spotCenter, this.canvasHeight / 2, spotRadius, 0, 6.28)
+                  this.takingVideoExtOffCanvasCxt.fill()
+                }
+                this.takingVideoExtOffCanvasCxt.globalAlpha = 1
+              }
+
+              this.takingVideoExtCanvasCtx.transferFromImageBitmap(this.takingVideoExtOffCanvasCxt.transferToImageBitmap())
+            })
+            .gesture(
+              GestureGroup(
+                GestureMode.Parallel,
+                LongPressGesture({ repeat: true })
+                  .onAction((event?: GestureEvent) => this.takingVideoExtLongPgAction(event))
+                  .onActionEnd(() => this.takingVideoExtLongPgActionEnd()),
+                PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Horizontal })
+                  .onActionStart((event?: GestureEvent) => this.takingVideoExtPgActionStart(event))
+                  .onActionUpdate((event?: GestureEvent) => this.takingVideoExtPgActionUpdate(event))
+                  .onActionEnd((event?: GestureEvent) => this.takingVideoExtPgActionEnd(event))
+              ))
+            .onTouch((event?: TouchEvent) => this.takingVideoExtTouched(event))
+          Image($r('app.media.ic_camera_public_focus_ev_bright_add'))
+            .width(24)
+            .height(24)
+            .fillColor(Color.White)
+            .onTouch((event?: TouchEvent) => this.addTouched(event))
+            .gesture(
+              GestureGroup(
+                GestureMode.Parallel,
+                LongPressGesture({ repeat: true })
+                  .onAction(() => this.addLongOnAction())
+                  .onActionEnd(() => this.addLongOnActionEnd()),
+              )
+            )
+        }.width(this.notTakeVideoExtCanvasWidth).height('100%').padding({ left: 58, right: 58 })
+      } else {
+        Canvas(this.foldCanvasCtx)
+          .width(this.foldCanvasWidth)
+          .height(this.canvasHeight)
+          .onReady(() => {
+            this.foldCanvasCtx.clearRect(0, 0, this.foldCanvasWidth, this.canvasHeight)
+            this.foldOffCanvasCtx.clearRect(0, 0, this.foldCanvasWidth, this.canvasHeight)
+            this.foldOffCanvasCtx.strokeStyle = '#ffffff'
+            this.foldOffCanvasCtx.fillStyle = '#ffffff'
+            this.foldOffCanvasCtx.lineWidth = 1.5
+            this.foldOffCanvasCtx.beginPath()
+            this.foldOffCanvasCtx.arc(this.foldCanvasWidth / 2, this.canvasHeight / 2, this.getZoomBtnRadius(), 0, 6.28)
+            this.foldOffCanvasCtx.stroke()
+            this.foldOffCanvasCtx.font = `bold ${vp2px(10)}px`
+            this.foldOffCanvasCtx.textAlign = 'center'
+            this.foldOffCanvasCtx.fillText(this.getZoomText(), this.foldCanvasWidth / 2, this.canvasHeight / 2 + 3)
+
+            let fullWidth = this.foldCanvasWidth / 2 - this.mainDotRadius
+            let spotCount =
+              (fullWidth - this.mainDotRadius * 2 - this.dotSpacing) / (this.dotSpacing + this.secDotRadius * 2) + 2
+            let spotOffset = this.state.zoomRatio === this.state.maxZoomRatio ? this.foldCanvasWidth / 2 - fullWidth
+              : this.foldCanvasWidth / 2
+            for (let i = 0; i < spotCount; i++) {
+              let spotCenter = 0
+              let spotRadius = 0
+              if (i === 0) {
+                spotRadius = this.mainDotRadius
+                spotCenter = spotOffset + spotRadius
+              } else if (i === spotCount - 1) {
+                spotRadius = this.mainDotRadius
+                spotCenter =
+                  spotOffset + this.mainDotRadius * 2 + (i - 1) * this.dotSpacing + (2 * i - 1) * this.secDotRadius -
+                  this.secDotRadius + spotRadius
+              } else {
+                spotRadius = this.secDotRadius
+                spotCenter =
+                  spotOffset + this.mainDotRadius * 2 + (i - 1) * this.dotSpacing + (2 * i - 1) * this.secDotRadius +
+                    spotRadius
+                this.foldOffCanvasCtx.globalAlpha = 0.2
+              }
+              if (spotCenter < this.foldCanvasWidth / 2 - this.getZoomBtnRadius() ||
+                spotCenter > this.foldCanvasWidth / 2 + this.getZoomBtnRadius()) {
+                this.foldOffCanvasCtx.beginPath()
+                this.foldOffCanvasCtx.arc(spotCenter, this.canvasHeight / 2, spotRadius, 0, 6.28)
+                this.foldOffCanvasCtx.fill()
+              }
+              this.foldOffCanvasCtx.globalAlpha = 1.0
+            }
+
+            this.foldCanvasCtx.transferFromImageBitmap(this.foldOffCanvasCtx.transferToImageBitmap())
+          })
+          .gesture(
+            GestureGroup(
+              GestureMode.Parallel,
+              LongPressGesture({ repeat: true })
+                .onAction(() => this.lpgOnAction())
+                .onActionEnd(() => this.lpgOnActionEnd()),
+              PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Horizontal })
+                .onActionStart(() => this.pgOnActionStart())
+                .onActionUpdate((event?: GestureEvent) => this.pgOnActionUpdate(event))
+                .onActionEnd(() => this.pgOnActionEnd())
+            )
+          )
+      }
+    }.width('100%').height(this.canvasHeight).margin({ bottom: !this.state.showZoomLabelValue ? 58 : 0 })
+  }
+
   private getCurrentCanvasType(): number {
     if (this.state.isShowZoomText && (this.state.videoState === 'beforeTakeVideo'
-    && (this.state.mode === 'PHOTO' || this.state.mode === 'VIDEO'))) {
+      && (this.state.mode === 'PHOTO' || this.state.mode === 'VIDEO'))) {
       return SHOW_NOT_TAKE_VIDEO_CANVAS
     } else if (this.state.mode === 'VIDEO'
-    && (this.state.isShowZoomText || this.state.videoState !== 'beforeTakeVideo')) {
+      && (this.state.isShowZoomText || this.state.videoState !== 'beforeTakeVideo')) {
       return SHOW_TAKING_VIDEO_CANVAS
     } else {
       return SHOW_FOLD_CANVAS
@@ -409,7 +641,8 @@ export struct ZoomView {
   private updateZoomRatio(): void {
     let padding = this.getPadding()
     let fullWidth = this.notTakeVideoExtCanvasWidth - padding * 2 - this.mainDotRadius * 2
-    let curZoomRatio = (this.offsetX / fullWidth) * (this.state.maxZoomRatio - this.state.minZoomRatio) + this.state.minZoomRatio
+    let curZoomRatio =
+      (this.offsetX / fullWidth) * (this.state.maxZoomRatio - this.state.minZoomRatio) + this.state.minZoomRatio
     if (curZoomRatio > this.state.maxZoomRatio) {
       curZoomRatio = this.state.maxZoomRatio
     }
@@ -440,218 +673,4 @@ export struct ZoomView {
       return 15.25
     }
   }
-
-  build() {
-    Stack({ alignContent: Alignment.Top }) {
-      Stack({ alignContent: Alignment.Top })
-        .width(this.offsetX + this.touchedOffsetX + this.state.zoomRatio)
-        .height(this.triggerRebuildNum)
-        .visibility(Visibility.None)
-      if (this.getCurrentCanvasType() === SHOW_NOT_TAKE_VIDEO_CANVAS) {
-        Canvas(this.notTakeVideoExtCanvasCtx)
-          .width(this.notTakeVideoExtCanvasWidth)
-          .height(this.canvasHeight)
-          .onReady(() => {
-            this.notTakeVideoExtCanvasCtx.clearRect(0, 0, this.notTakeVideoExtCanvasWidth, this.canvasHeight)
-            this.notTakeVideoExtOffCanvasCtx.clearRect(0, 0, this.notTakeVideoExtCanvasWidth, this.canvasHeight)
-            this.notTakeVideoExtOffCanvasCtx.strokeStyle = '#ffffff'
-            this.notTakeVideoExtOffCanvasCtx.fillStyle = '#ffffff'
-            this.notTakeVideoExtOffCanvasCtx.lineWidth = 1.5
-            this.notTakeVideoExtOffCanvasCtx.beginPath()
-            this.notTakeVideoExtOffCanvasCtx.arc(this.getZoomBtnCenterX(), this.canvasHeight / 2, this.getZoomBtnRadius(), 0, 6.28)
-            this.notTakeVideoExtOffCanvasCtx.stroke()
-            if (this.state.showZoomLabelValue) {
-              this.notTakeVideoExtOffCanvasCtx.font = `bold ${vp2px(11)}px`
-              this.notTakeVideoExtOffCanvasCtx.textAlign = 'center'
-              this.notTakeVideoExtOffCanvasCtx.fillText(this.getZoomText(), this.getZoomBtnCenterX(), this.canvasHeight / 2 + 5)
-            } else {
-              this.notTakeVideoExtOffCanvasCtx.beginPath()
-              this.notTakeVideoExtOffCanvasCtx.arc(this.getZoomBtnCenterX(), this.canvasHeight / 2, this.centerDotRadius, 0, 6.28)
-              this.notTakeVideoExtOffCanvasCtx.fill()
-            }
-
-            let spotCount = (this.notTakeVideoExtCanvasWidth - this.getPadding() * 2 - this.mainDotRadius * 4 - this.dotSpacing) / (this.dotSpacing + this.secDotRadius * 2) + 2
-            for (let i = 0; i < spotCount; i++) {
-              let spotCenter = 0
-              let spotRadius = 0
-              if (i === 0) {
-                spotRadius = this.mainDotRadius
-                spotCenter = this.getPadding() + spotRadius
-                this.notTakeVideoExtOffCanvasCtx.font = `bold ${vp2px(11)}px`
-                this.notTakeVideoExtOffCanvasCtx.textAlign = 'center'
-                this.notTakeVideoExtOffCanvasCtx.fillText(`${this.state.minZoomRatio}x`, spotCenter, this.canvasHeight / 2 - (!this.state.showZoomLabelValue ? 26 : 24))
-              } else if (i === spotCount - 1) {
-                spotRadius = this.mainDotRadius
-                spotCenter = this.notTakeVideoExtCanvasWidth - this.getPadding() - spotRadius
-                this.notTakeVideoExtOffCanvasCtx.font = `bold ${vp2px(11)}px`
-                this.notTakeVideoExtOffCanvasCtx.textAlign = 'center'
-                this.notTakeVideoExtOffCanvasCtx.fillText(`${this.state.maxZoomRatio}x`, spotCenter, this.canvasHeight / 2 - (!this.state.showZoomLabelValue ? 26 : 24))
-              } else {
-                spotRadius = this.secDotRadius
-                spotCenter = this.getPadding() + this.mainDotRadius + (2 * i - 1) * this.secDotRadius + i * this.dotSpacing
-                this.notTakeVideoExtOffCanvasCtx.globalAlpha = 0.2
-              }
-              if (spotCenter < this.getZoomBtnCenterX() - this.getZoomBtnRadius() || spotCenter > this.getZoomBtnCenterX() + this.getZoomBtnRadius()) {
-                this.notTakeVideoExtOffCanvasCtx.beginPath()
-                this.notTakeVideoExtOffCanvasCtx.arc(spotCenter, this.canvasHeight / 2, spotRadius, 0, 6.28)
-                this.notTakeVideoExtOffCanvasCtx.fill()
-              }
-              this.notTakeVideoExtOffCanvasCtx.globalAlpha = 1
-            }
-            this.notTakeVideoExtCanvasCtx.transferFromImageBitmap(this.notTakeVideoExtOffCanvasCtx.transferToImageBitmap())
-          })
-          .gesture(GestureGroup(GestureMode.Parallel,
-          PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Horizontal })
-            .onActionStart(() => this.pgOnActionStart())
-            .onActionUpdate((event?: GestureEvent) => {
-              if (event) {
-                return this.pgOnActionUpdate(event);
-              }
-            })
-            .onActionEnd(() => this.pgOnActionEnd())))
-          .onTouch((event?: TouchEvent) => {
-            if (event) {
-              return this.mOnTouch(event);
-            }
-          })
-      } else if (this.getCurrentCanvasType() === SHOW_TAKING_VIDEO_CANVAS) {
-        Row() {
-          Image($r('app.media.ic_camera_public_focus_ev_bright_subtract'))
-            .width(24)
-            .height(24)
-            .fillColor(Color.White)
-            .onTouch((event?: TouchEvent) => this.subtractTouched(event))
-            .gesture(
-            GestureGroup(
-            GestureMode.Parallel,
-            LongPressGesture({ repeat: true })
-              .onAction((event?: GestureEvent) => this.subtractLongOnAction(event))
-              .onActionEnd(() => this.subtractLongOnActionEnd()),
-            )
-            )
-          Canvas(this.takingVideoExtCanvasCtx)
-            .width(this.takingVideoExtCanvasWidth)
-            .height(this.canvasHeight)
-            .onReady(() => {
-              this.takingVideoExtCanvasCtx.clearRect(0, 0, this.takingVideoExtCanvasWidth, this.canvasHeight)
-              this.takingVideoExtOffCanvasCxt.clearRect(0, 0, this.takingVideoExtCanvasWidth, this.canvasHeight)
-              this.takingVideoExtOffCanvasCxt.strokeStyle = '#ffffff'
-              this.takingVideoExtOffCanvasCxt.fillStyle = '#ffffff'
-              this.takingVideoExtOffCanvasCxt.lineWidth = 1.5
-              this.takingVideoExtOffCanvasCxt.beginPath()
-              this.takingVideoExtOffCanvasCxt.arc(this.getZoomBtnCenterX(), this.canvasHeight / 2, this.getZoomBtnRadius(), 0, 6.28)
-              this.takingVideoExtOffCanvasCxt.stroke()
-              if (this.state.isShowZoomText) {
-                this.takingVideoExtOffCanvasCxt.beginPath()
-                this.takingVideoExtOffCanvasCxt.arc(this.getZoomBtnCenterX(), this.canvasHeight / 2, this.centerDotRadius, 0, 6.28)
-                this.takingVideoExtOffCanvasCxt.fill()
-              } else {
-                this.takingVideoExtOffCanvasCxt.font = `bold ${vp2px(11)}px`
-                this.takingVideoExtOffCanvasCxt.textAlign = 'center'
-                this.takingVideoExtOffCanvasCxt.fillText(this.getZoomText(), this.getZoomBtnCenterX(), this.canvasHeight / 2 + 5)
-              }
-
-              let spotCount = 30
-              for (let i = 0; i < spotCount; i++) {
-                let spotCenter = 0
-                let spotRadius = 0
-                spotRadius = this.secDotRadius
-                spotCenter = this.getPadding() + (2 * i + 1) * this.secDotRadius + i * this.dotSpacing
-                this.takingVideoExtOffCanvasCxt.globalAlpha = 0.2
-                if (spotCenter < this.getZoomBtnCenterX() - this.getZoomBtnRadius() || spotCenter > this.getZoomBtnCenterX() + this.getZoomBtnRadius()) {
-                  this.takingVideoExtOffCanvasCxt.beginPath()
-                  this.takingVideoExtOffCanvasCxt.arc(spotCenter, this.canvasHeight / 2, spotRadius, 0, 6.28)
-                  this.takingVideoExtOffCanvasCxt.fill()
-                }
-                this.takingVideoExtOffCanvasCxt.globalAlpha = 1
-              }
-
-              this.takingVideoExtCanvasCtx.transferFromImageBitmap(this.takingVideoExtOffCanvasCxt.transferToImageBitmap())
-            })
-            .gesture(
-            GestureGroup(
-            GestureMode.Parallel,
-            LongPressGesture({ repeat: true })
-              .onAction((event?: GestureEvent) => this.takingVideoExtLongPgAction(event))
-              .onActionEnd(() => this.takingVideoExtLongPgActionEnd()),
-            PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Horizontal })
-              .onActionStart((event?: GestureEvent) => this.takingVideoExtPgActionStart(event))
-              .onActionUpdate((event?: GestureEvent) => this.takingVideoExtPgActionUpdate(event))
-              .onActionEnd((event?: GestureEvent) => this.takingVideoExtPgActionEnd(event))
-            ))
-            .onTouch((event?: TouchEvent) => this.takingVideoExtTouched(event))
-          Image($r('app.media.ic_camera_public_focus_ev_bright_add'))
-            .width(24)
-            .height(24)
-            .fillColor(Color.White)
-            .onTouch((event?: TouchEvent) => this.addTouched(event))
-            .gesture(
-            GestureGroup(
-            GestureMode.Parallel,
-            LongPressGesture({ repeat: true })
-              .onAction(() => this.addLongOnAction())
-              .onActionEnd(() => this.addLongOnActionEnd()),
-            )
-            )
-        }.width(this.notTakeVideoExtCanvasWidth).height('100%').padding({ left: 58, right: 58 })
-      } else {
-        Canvas(this.foldCanvasCtx)
-          .width(this.foldCanvasWidth)
-          .height(this.canvasHeight)
-          .onReady(() => {
-            this.foldCanvasCtx.clearRect(0, 0, this.foldCanvasWidth, this.canvasHeight)
-            this.foldOffCanvasCtx.clearRect(0, 0, this.foldCanvasWidth, this.canvasHeight)
-            this.foldOffCanvasCtx.strokeStyle = '#ffffff'
-            this.foldOffCanvasCtx.fillStyle = '#ffffff'
-            this.foldOffCanvasCtx.lineWidth = 1.5
-            this.foldOffCanvasCtx.beginPath()
-            this.foldOffCanvasCtx.arc(this.foldCanvasWidth / 2, this.canvasHeight / 2, this.getZoomBtnRadius(), 0, 6.28)
-            this.foldOffCanvasCtx.stroke()
-            this.foldOffCanvasCtx.font = `bold ${vp2px(10)}px`
-            this.foldOffCanvasCtx.textAlign = 'center'
-            this.foldOffCanvasCtx.fillText(this.getZoomText(), this.foldCanvasWidth / 2, this.canvasHeight / 2 + 3)
-
-            let fullWidth = this.foldCanvasWidth / 2 - this.mainDotRadius
-            let spotCount = (fullWidth - this.mainDotRadius * 2 - this.dotSpacing) / (this.dotSpacing + this.secDotRadius * 2) + 2
-            let spotOffset = this.state.zoomRatio === this.state.maxZoomRatio ? this.foldCanvasWidth / 2 - fullWidth
-                                                                              : this.foldCanvasWidth / 2
-            for (let i = 0; i < spotCount; i++) {
-              let spotCenter = 0
-              let spotRadius = 0
-              if (i === 0) {
-                spotRadius = this.mainDotRadius
-                spotCenter = spotOffset + spotRadius
-              } else if (i === spotCount - 1) {
-                spotRadius = this.mainDotRadius
-                spotCenter = spotOffset + this.mainDotRadius * 2 + (i - 1) * this.dotSpacing + (2 * i - 1) * this.secDotRadius - this.secDotRadius + spotRadius
-              } else {
-                spotRadius = this.secDotRadius
-                spotCenter = spotOffset + this.mainDotRadius * 2 + (i - 1) * this.dotSpacing + (2 * i - 1) * this.secDotRadius + spotRadius
-                this.foldOffCanvasCtx.globalAlpha = 0.2
-              }
-              if (spotCenter < this.foldCanvasWidth / 2 - this.getZoomBtnRadius() || spotCenter > this.foldCanvasWidth / 2 + this.getZoomBtnRadius()) {
-                this.foldOffCanvasCtx.beginPath()
-                this.foldOffCanvasCtx.arc(spotCenter, this.canvasHeight / 2, spotRadius, 0, 6.28)
-                this.foldOffCanvasCtx.fill()
-              }
-              this.foldOffCanvasCtx.globalAlpha = 1.0
-            }
-
-            this.foldCanvasCtx.transferFromImageBitmap(this.foldOffCanvasCtx.transferToImageBitmap())
-          })
-          .gesture(
-          GestureGroup(
-          GestureMode.Parallel,
-          LongPressGesture({ repeat: true })
-            .onAction(() => this.lpgOnAction())
-            .onActionEnd(() => this.lpgOnActionEnd()),
-          PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Horizontal })
-            .onActionStart(() => this.pgOnActionStart())
-            .onActionUpdate((event?: GestureEvent) => this.pgOnActionUpdate(event))
-            .onActionEnd(() => this.pgOnActionEnd())
-          )
-          )
-      }
-    }.width('100%').height(this.canvasHeight).margin({ bottom: !this.state.showZoomLabelValue ? 58 : 0 })
-  }
 }

common/src/main/ets/default/featurecommon/zoomview/ZoomViewLand.ets

@@ -13,8 +13,7 @@
  * limitations under the License.
  */
 
-import { Dispatch, OhCombinedState } from '../../redux/store';
-import { getStore } from '../../redux/store';
+import { Dispatch, getStore, OhCombinedState } from '../../redux/store';
 import { Action } from '../../redux/actions/Action';
 import { EventBus } from '../../worker/eventbus/EventBus';
 import { EventBusManager } from '../../worker/eventbus/EventBusManager';
@@ -37,8 +36,6 @@ class StateStruct {
 
 
 class ZoomViewDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -54,6 +51,8 @@ class ZoomViewDispatcher {
   public updateShowZoomLabelValue(flag: boolean): void {
     this.mDispatch(Action.updateShowZoomLabelValue(flag));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 class ZoomRatioStruct {
@@ -66,9 +65,6 @@ class VideoStateStruct {
 
 @Component
 export struct ZoomViewLand {
-  private appEventBus: EventBus = EventBusManager.getInstance().getEventBus()
-  private mAction: ZoomViewDispatcher = new ZoomViewDispatcher();
-
   @State state: StateStruct = new StateStruct()
   @State @Watch('onZoomRatioRefresh') zoomRatio: number = 0
   @State @Watch('onZoomRatioRefresh') showZoomLabelValue: boolean = true
@@ -76,33 +72,30 @@ export struct ZoomViewLand {
   @State @Watch('onZoomRatioRefresh') curZoomRatio: number = 0
   @State offsetY: number = 0
   @State triggerRebuildNum: number = 0
-
+  private appEventBus: EventBus = EventBusManager.getInstance().getEventBus()
+  private mAction: ZoomViewDispatcher = new ZoomViewDispatcher();
   private canvasWidth: number = 82
   private notTakeVideoExtCanvasHeight: number = 360
   private takingVideoExtCanvasHeight: number = 196
   private foldCanvasHeight: number = 94
-
   private touchedOffsetY: number = this.takingVideoExtCanvasHeight / 2
   private startOffsetY: number = 0
-
   private canvasSettings: RenderingContextSettings = new RenderingContextSettings(true)
   private notTakeVideoExtCanvasCxt: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.canvasSettings)
   private takingVideoExtCanvasCxt: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.canvasSettings)
   private foldCanvasCxt: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.canvasSettings)
   private notTakeVideoExtOffCanvasCxt: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(
-  this.canvasWidth, this.notTakeVideoExtCanvasHeight, this.canvasSettings)
+    this.canvasWidth, this.notTakeVideoExtCanvasHeight, this.canvasSettings)
   private takingVideoExtOffCanvasCxt: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(
-  this.canvasWidth, this.notTakeVideoExtCanvasHeight, this.canvasSettings)
+    this.canvasWidth, this.notTakeVideoExtCanvasHeight, this.canvasSettings)
   private foldOffCanvasCxt: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(
-  this.canvasWidth, this.foldCanvasHeight, this.canvasSettings)
-
+    this.canvasWidth, this.foldCanvasHeight, this.canvasSettings)
   private lpgTimer: number = 0
   private pgTimer: number = 0
   private lpgExp: boolean = false
   private pgExp: boolean = false
   private zoomTimer: number = 0
   private baseZoomRatio: number = 1
-
   private mainDotRadius: number = 1.5
   private secDotRadius: number = 0.75
   private centerDotRadius: number = 2.5
@@ -134,12 +127,105 @@ export struct ZoomViewLand {
     this.appEventBus.off(Action.ACTION_UPDATE_VIDEO_STATE, (data: VideoStateStruct) => this.updateZoomState(data))
   }
 
+  build() {
+    Stack({ alignContent: Alignment.Start }) {
+      Stack({ alignContent: Alignment.Top })
+        .width(this.triggerRebuildNum)
+        .height(this.offsetY + this.touchedOffsetY + this.zoomRatio)
+        .visibility(Visibility.None)
+      if (this.getCurrentCanvasType() === SHOW_NOT_TAKE_VIDEO_CANVAS) {
+        Canvas(this.notTakeVideoExtCanvasCxt)
+          .width(this.canvasWidth)
+          .height(this.notTakeVideoExtCanvasHeight)
+          .onReady(() => this.canvasInit(SHOW_NOT_TAKE_VIDEO_CANVAS))
+          .gesture(
+            GestureGroup(
+              GestureMode.Parallel,
+              PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Vertical })
+                .onActionStart(() => this.pgOnActionStart())
+                .onActionUpdate((event?: GestureEvent) => {
+                  if (event) {
+                    return this.pgOnActionUpdate(event);
+                  }
+                })
+                .onActionEnd(() => this.pgOnActionEnd())))
+          .onTouch((event?: TouchEvent) => {
+            if (event) {
+              return this.mOnTouch(event);
+            }
+          })
+      } else if (this.getCurrentCanvasType() === SHOW_TAKING_VIDEO_CANVAS) {
+        Column() {
+          Image($r('app.media.ic_camera_public_focus_ev_bright_add'))
+            .width(24)
+            .height(24)
+            .fillColor(Color.White)
+            .onTouch((event?: TouchEvent) => this.addTouched(event))
+            .gesture(
+              GestureGroup(
+                GestureMode.Parallel,
+                LongPressGesture({ repeat: true })
+                  .onAction(() => this.addLongOnAction())
+                  .onActionEnd(() => this.addLongOnActionEnd()),
+              )
+            )
+          Canvas(this.takingVideoExtCanvasCxt)
+            .width(this.canvasWidth)
+            .height(this.takingVideoExtCanvasHeight)
+            .onReady(() => this.canvasInit(SHOW_TAKING_VIDEO_CANVAS))
+            .gesture(
+              GestureGroup(
+                GestureMode.Parallel,
+                LongPressGesture({ repeat: true })
+                  .onAction((event?: GestureEvent) => this.takingVideoExtLongPgAction(event))
+                  .onActionEnd(() => this.takingVideoExtLongPgActionEnd()),
+                PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Horizontal })
+                  .onActionStart((event?: GestureEvent) => this.takingVideoExtPgActionStart(event))
+                  .onActionUpdate((event?: GestureEvent) => this.takingVideoExtPgActionUpdate(event))
+                  .onActionEnd((event?: GestureEvent) => this.takingVideoExtPgActionEnd(event))
+              ))
+            .onTouch((event?: TouchEvent) => this.takingVideoExtTouched(event))
+          Image($r('app.media.ic_camera_public_focus_ev_bright_subtract'))
+            .width(24)
+            .height(24)
+            .fillColor(Color.White)
+            .onTouch((event?: TouchEvent) => this.subtractTouched(event))
+            .gesture(
+              GestureGroup(
+                GestureMode.Parallel,
+                LongPressGesture({ repeat: true })
+                  .onAction((event?: GestureEvent) => this.subtractLongOnAction(event))
+                  .onActionEnd(() => this.subtractLongOnActionEnd()),
+              )
+            )
+        }.width('100%').height(this.notTakeVideoExtCanvasHeight).padding({ top: 58, bottom: 58 })
+      } else {
+        Canvas(this.foldCanvasCxt)
+          .width(this.canvasWidth)
+          .height(this.foldCanvasHeight)
+          .onReady(() => this.canvasInit(SHOW_FOLD_CANVAS))
+          .gesture(
+            GestureGroup(
+              GestureMode.Parallel,
+              LongPressGesture({ repeat: true })
+                .onAction(() => this.lpgOnAction())
+                .onActionEnd(() => this.lpgOnActionEnd()),
+              PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Horizontal })
+                .onActionStart(() => this.pgOnActionStart())
+                .onActionUpdate((event?: GestureEvent) => this.pgOnActionUpdate(event))
+                .onActionEnd(() => this.pgOnActionEnd())
+            )
+          )
+      }
+    }.width(82).height('100%')
+  }
+
   private getCurrentCanvasType(): number {
     if (this.isShowZoomText && (this.state.videoState === 'beforeTakeVideo'
-    && (this.state.mode === 'PHOTO' || this.state.mode === 'VIDEO'))) {
+      && (this.state.mode === 'PHOTO' || this.state.mode === 'VIDEO'))) {
       return SHOW_NOT_TAKE_VIDEO_CANVAS
     } else if (this.state.mode === 'VIDEO'
-    && (this.isShowZoomText || this.state.videoState !== 'beforeTakeVideo')) {
+      && (this.isShowZoomText || this.state.videoState !== 'beforeTakeVideo')) {
       return SHOW_TAKING_VIDEO_CANVAS
     } else {
       return SHOW_FOLD_CANVAS
@@ -200,7 +286,6 @@ export struct ZoomViewLand {
     this.changeZoomRatioOnTakingVideoExt()
   }
 
-
   private takingVideoExtLongPgActionEnd(): void {
     this.touchedOffsetY = this.takingVideoExtCanvasHeight / 2
     this.changeZoomRatioOnTakingVideoExt()
@@ -392,7 +477,6 @@ export struct ZoomViewLand {
     return fullHeight / (this.state.maxZoomRatio - this.state.minZoomRatio)
   }
 
-
   private updateZoomOffset(data: ZoomRatioStruct): void {
     let offset = (data.zoomRatio - this.state.minZoomRatio) * this.getZoomOffsetUnit();
     this.offsetY = offset;
@@ -418,7 +502,8 @@ export struct ZoomViewLand {
   private updateZoomRatio(): void {
     let padding = this.getPadding()
     let fullHeight = this.notTakeVideoExtCanvasHeight - padding * 2 - this.mainDotRadius * 2
-    this.curZoomRatio = (this.offsetY / fullHeight) * (this.state.maxZoomRatio - this.state.minZoomRatio) + this.state.minZoomRatio
+    this.curZoomRatio =
+      (this.offsetY / fullHeight) * (this.state.maxZoomRatio - this.state.minZoomRatio) + this.state.minZoomRatio
     if (this.curZoomRatio > this.state.maxZoomRatio) {
       this.curZoomRatio = this.state.maxZoomRatio
     }
@@ -481,7 +566,8 @@ export struct ZoomViewLand {
     this.notTakeVideoExtOffCanvasCxt.fillStyle = '#ffffff'
     this.notTakeVideoExtOffCanvasCxt.lineWidth = 1.5
     this.notTakeVideoExtOffCanvasCxt.beginPath()
-    this.notTakeVideoExtOffCanvasCxt.arc(this.canvasWidth / 2, this.getZoomBtnCenterY(), this.getZoomBtnRadius(), 0, 6.28)
+    this.notTakeVideoExtOffCanvasCxt.arc(this.canvasWidth / 2, this.getZoomBtnCenterY(), this.getZoomBtnRadius(), 0,
+      6.28)
     this.notTakeVideoExtOffCanvasCxt.stroke()
     if (this.showZoomLabelValue) {
       this.notTakeVideoExtOffCanvasCxt.font = `bold ${vp2px(11)}px`
@@ -489,11 +575,14 @@ export struct ZoomViewLand {
       this.notTakeVideoExtOffCanvasCxt.fillText(this.getZoomText(), this.canvasWidth / 2, this.getZoomBtnCenterY() + 5)
     } else {
       this.notTakeVideoExtOffCanvasCxt.beginPath()
-      this.notTakeVideoExtOffCanvasCxt.arc(this.canvasWidth / 2, this.getZoomBtnCenterY(), this.centerDotRadius, 0, 6.28)
+      this.notTakeVideoExtOffCanvasCxt.arc(this.canvasWidth / 2, this.getZoomBtnCenterY(), this.centerDotRadius, 0,
+        6.28)
       this.notTakeVideoExtOffCanvasCxt.fill()
     }
 
-    let spotCount = (this.notTakeVideoExtCanvasHeight - this.getPadding() * 2 - this.mainDotRadius * 4 - this.dotSpacing) / (this.dotSpacing + this.secDotRadius * 2) + 2
+    let spotCount =
+      (this.notTakeVideoExtCanvasHeight - this.getPadding() * 2 - this.mainDotRadius * 4 - this.dotSpacing) /
+        (this.dotSpacing + this.secDotRadius * 2) + 2
     for (let i = 0; i < spotCount; i++) {
       let spotCenter = 0
       let spotRadius = 0
@@ -502,19 +591,23 @@ export struct ZoomViewLand {
         spotCenter = this.notTakeVideoExtCanvasHeight - this.getPadding() - spotRadius
         this.notTakeVideoExtOffCanvasCxt.font = `bold ${vp2px(11)}px`
         this.notTakeVideoExtOffCanvasCxt.textAlign = 'right'
-        this.notTakeVideoExtOffCanvasCxt.fillText(`${this.state.minZoomRatio}x`,this.canvasWidth / 2 - (!this.showZoomLabelValue ? 26: 24), spotCenter)
+        this.notTakeVideoExtOffCanvasCxt.fillText(`${this.state.minZoomRatio}x`,
+          this.canvasWidth / 2 - (!this.showZoomLabelValue ? 26 : 24), spotCenter)
       } else if (i === spotCount - 1) {
         spotRadius = this.mainDotRadius
         spotCenter = this.getPadding() + spotRadius
         this.notTakeVideoExtOffCanvasCxt.font = `bold ${vp2px(11)}px`
         this.notTakeVideoExtOffCanvasCxt.textAlign = 'right'
-        this.notTakeVideoExtOffCanvasCxt.fillText(`${this.state.maxZoomRatio}x`,this.canvasWidth / 2 - (!this.showZoomLabelValue ? 26: 24), spotCenter)
+        this.notTakeVideoExtOffCanvasCxt.fillText(`${this.state.maxZoomRatio}x`,
+          this.canvasWidth / 2 - (!this.showZoomLabelValue ? 26 : 24), spotCenter)
       } else {
         spotRadius = this.secDotRadius
-        spotCenter = this.notTakeVideoExtCanvasHeight - this.getPadding() - this.mainDotRadius * 2 - (2 * i - 1) * this.secDotRadius - i * this.dotSpacing
+        spotCenter = this.notTakeVideoExtCanvasHeight - this.getPadding() - this.mainDotRadius * 2 -
+          (2 * i - 1) * this.secDotRadius - i * this.dotSpacing
         this.notTakeVideoExtOffCanvasCxt.globalAlpha = 0.2
       }
-      if (spotCenter < this.getZoomBtnCenterY() - this.getZoomBtnRadius() || spotCenter > this.getZoomBtnCenterY() + this.getZoomBtnRadius()) {
+      if (spotCenter < this.getZoomBtnCenterY() - this.getZoomBtnRadius() ||
+        spotCenter > this.getZoomBtnCenterY() + this.getZoomBtnRadius()) {
         this.notTakeVideoExtOffCanvasCxt.beginPath()
         this.notTakeVideoExtOffCanvasCxt.arc(this.canvasWidth / 2, spotCenter, spotRadius, 0, 6.28)
         this.notTakeVideoExtOffCanvasCxt.fill()
@@ -531,7 +624,8 @@ export struct ZoomViewLand {
     this.takingVideoExtOffCanvasCxt.fillStyle = '#ffffff'
     this.takingVideoExtOffCanvasCxt.lineWidth = 1.5
     this.takingVideoExtOffCanvasCxt.beginPath()
-    this.takingVideoExtOffCanvasCxt.arc(this.canvasWidth / 2, this.getZoomBtnCenterY(), this.getZoomBtnRadius(), 0, 6.28)
+    this.takingVideoExtOffCanvasCxt.arc(this.canvasWidth / 2, this.getZoomBtnCenterY(), this.getZoomBtnRadius(), 0,
+      6.28)
     this.takingVideoExtOffCanvasCxt.stroke()
     if (this.isShowZoomText) {
       this.takingVideoExtOffCanvasCxt.beginPath()
@@ -550,7 +644,8 @@ export struct ZoomViewLand {
       spotRadius = this.secDotRadius
       spotCenter = this.getPadding() + (2 * i + 1) * this.secDotRadius + i * this.dotSpacing
       this.takingVideoExtOffCanvasCxt.globalAlpha = 0.2
-      if (spotCenter < this.getZoomBtnCenterY() - this.getZoomBtnRadius() || spotCenter > this.getZoomBtnCenterY() + this.getZoomBtnRadius()) {
+      if (spotCenter < this.getZoomBtnCenterY() - this.getZoomBtnRadius() ||
+        spotCenter > this.getZoomBtnCenterY() + this.getZoomBtnRadius()) {
         this.takingVideoExtOffCanvasCxt.beginPath()
         this.takingVideoExtOffCanvasCxt.arc(this.canvasWidth / 2, spotCenter, spotRadius, 0, 6.28)
         this.takingVideoExtOffCanvasCxt.fill()
@@ -576,9 +671,10 @@ export struct ZoomViewLand {
     this.foldOffCanvasCxt.fillText(this.getZoomText(), this.canvasWidth / 2, this.foldCanvasHeight / 2 + 3)
 
     let fullHeight = this.foldCanvasHeight / 2 - this.mainDotRadius
-    let spotCount = (fullHeight - this.mainDotRadius * 2 - this.dotSpacing) / (this.dotSpacing + this.secDotRadius * 2) + 2
+    let spotCount =
+      (fullHeight - this.mainDotRadius * 2 - this.dotSpacing) / (this.dotSpacing + this.secDotRadius * 2) + 2
     let spotOffset = (this.zoomRatio === this.state.maxZoomRatio) ? this.foldCanvasHeight / 2 + fullHeight
-                                                                  : this.foldCanvasHeight / 2
+      : this.foldCanvasHeight / 2
     for (let i = 0; i < spotCount; i++) {
       let spotCenter = 0
       let spotRadius = 0
@@ -587,13 +683,16 @@ export struct ZoomViewLand {
         spotCenter = spotOffset - spotRadius
       } else if (i === spotCount - 1) {
         spotRadius = this.mainDotRadius
-        spotCenter = spotOffset - this.mainDotRadius * 2 - (i - 1) * this.dotSpacing - (2 * i - 1) * this.secDotRadius + this.secDotRadius - spotRadius
+        spotCenter = spotOffset - this.mainDotRadius * 2 - (i - 1) * this.dotSpacing - (2 * i - 1) * this.secDotRadius +
+        this.secDotRadius - spotRadius
       } else {
         spotRadius = this.secDotRadius
-        spotCenter = spotOffset - this.mainDotRadius * 2 - (i - 1) * this.dotSpacing - (2 * i - 1) * this.secDotRadius - spotRadius
+        spotCenter =
+          spotOffset - this.mainDotRadius * 2 - (i - 1) * this.dotSpacing - (2 * i - 1) * this.secDotRadius - spotRadius
         this.foldOffCanvasCxt.globalAlpha = 0.2
       }
-      if (spotCenter > this.foldCanvasHeight / 2 + this.getZoomBtnRadius() || spotCenter < this.foldCanvasHeight / 2 - this.getZoomBtnRadius()) {
+      if (spotCenter > this.foldCanvasHeight / 2 + this.getZoomBtnRadius() ||
+        spotCenter < this.foldCanvasHeight / 2 - this.getZoomBtnRadius()) {
         this.foldOffCanvasCxt.beginPath()
         this.foldOffCanvasCxt.arc(this.canvasWidth / 2, spotCenter, spotRadius, 0, 6.28)
         this.foldOffCanvasCxt.fill()
@@ -602,94 +701,4 @@ export struct ZoomViewLand {
     }
     this.foldCanvasCxt.transferFromImageBitmap(this.foldOffCanvasCxt.transferToImageBitmap())
   }
-
-  build() {
-    Stack({ alignContent: Alignment.Start}) {
-      Stack({ alignContent: Alignment.Top }).width(this.triggerRebuildNum).height(this.offsetY + this.touchedOffsetY + this.zoomRatio).visibility(Visibility.None)
-      if (this.getCurrentCanvasType() === SHOW_NOT_TAKE_VIDEO_CANVAS) {
-        Canvas(this.notTakeVideoExtCanvasCxt)
-          .width(this.canvasWidth)
-          .height(this.notTakeVideoExtCanvasHeight)
-          .onReady(() => this.canvasInit(SHOW_NOT_TAKE_VIDEO_CANVAS))
-          .gesture(
-          GestureGroup(
-          GestureMode.Parallel,
-          PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Vertical})
-            .onActionStart(() => this.pgOnActionStart())
-            .onActionUpdate((event?: GestureEvent) => {
-              if (event) {
-                return this.pgOnActionUpdate(event);
-              }
-            })
-            .onActionEnd(() => this.pgOnActionEnd())))
-          .onTouch((event?: TouchEvent) => {
-            if (event) {
-              return this.mOnTouch(event);
-            }
-          })
-      } else if (this.getCurrentCanvasType() === SHOW_TAKING_VIDEO_CANVAS) {
-        Column() {
-          Image($r('app.media.ic_camera_public_focus_ev_bright_add'))
-            .width(24)
-            .height(24)
-            .fillColor(Color.White)
-            .onTouch((event?: TouchEvent) => this.addTouched(event))
-            .gesture(
-            GestureGroup(
-            GestureMode.Parallel,
-            LongPressGesture({ repeat: true })
-              .onAction(() => this.addLongOnAction())
-              .onActionEnd(() => this.addLongOnActionEnd()),
-            )
-            )
-          Canvas(this.takingVideoExtCanvasCxt)
-            .width(this.canvasWidth)
-            .height(this.takingVideoExtCanvasHeight)
-            .onReady(() => this.canvasInit(SHOW_TAKING_VIDEO_CANVAS))
-            .gesture(
-            GestureGroup(
-            GestureMode.Parallel,
-            LongPressGesture({ repeat: true })
-              .onAction((event?: GestureEvent) => this.takingVideoExtLongPgAction(event))
-              .onActionEnd(() => this.takingVideoExtLongPgActionEnd()),
-            PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Horizontal })
-              .onActionStart((event?: GestureEvent) => this.takingVideoExtPgActionStart(event))
-              .onActionUpdate((event?: GestureEvent) => this.takingVideoExtPgActionUpdate(event))
-              .onActionEnd((event?: GestureEvent) => this.takingVideoExtPgActionEnd(event))
-            ))
-            .onTouch((event?: TouchEvent) => this.takingVideoExtTouched(event))
-          Image($r('app.media.ic_camera_public_focus_ev_bright_subtract'))
-            .width(24)
-            .height(24)
-            .fillColor(Color.White)
-            .onTouch((event?: TouchEvent) => this.subtractTouched(event))
-            .gesture(
-            GestureGroup(
-            GestureMode.Parallel,
-            LongPressGesture({ repeat: true })
-              .onAction((event?: GestureEvent) => this.subtractLongOnAction(event))
-              .onActionEnd(() => this.subtractLongOnActionEnd()),
-            )
-            )
-        }.width('100%').height(this.notTakeVideoExtCanvasHeight).padding({ top: 58, bottom: 58 })
-      } else {
-        Canvas(this.foldCanvasCxt)
-          .width(this.canvasWidth)
-          .height(this.foldCanvasHeight)
-          .onReady(() => this.canvasInit(SHOW_FOLD_CANVAS))
-          .gesture(
-          GestureGroup(
-          GestureMode.Parallel,
-          LongPressGesture({ repeat: true })
-            .onAction(() => this.lpgOnAction())
-            .onActionEnd(() => this.lpgOnActionEnd()),
-          PanGesture({ fingers: 1, distance: 1, direction: PanDirection.Horizontal })
-            .onActionStart(() => this.pgOnActionStart())
-            .onActionUpdate((event?: GestureEvent) => this.pgOnActionUpdate(event))
-            .onActionEnd(() => this.pgOnActionEnd())
-          )
-          )
-      }
-    }.width(82).height('100%')
-  }
 }

common/src/main/ets/default/featureservice/FeatureManager.ts

@@ -22,7 +22,6 @@ import type { EventBus } from '../worker/eventbus/EventBus';
 import { EventBusManager } from '../worker/eventbus/EventBusManager';
 import { ModeAssembler } from './ModeAssembler';
 import { RecordFunction } from '../function/RecordFunction';
-import { WorkerManager } from '../worker/WorkerManager';
 import { ZoomFunction } from '../function/ZoomFunction';
 import type { IModeMap } from './IModeMap';
 

common/src/main/ets/default/featureservice/FunctionId.ts

@@ -14,9 +14,9 @@
  */
 
 export enum FunctionId {
-    NONE,
-    CAMERA_BASIC_FUNCTION,
-    CAPTURE_FUNCTION,
-    RECORDING_FUNCTION,
-    ZOOM_FUNCTION
+  NONE,
+  CAMERA_BASIC_FUNCTION,
+  CAPTURE_FUNCTION,
+  RECORDING_FUNCTION,
+  ZOOM_FUNCTION
 }

common/src/main/ets/default/featureservice/ModeAssembler.ts

@@ -45,11 +45,11 @@ export class ModeAssembler {
       this.mNeedAdd = JSON.parse(JSON.stringify(currentModeFun))
       for (let fun of preModeFun) {
         let index = currentModeFun.indexOf(fun)
-          if (index == -1) {
-            this.mNeedDelete.push(fun)
-          } else {
-            this.mNeedAdd.splice(index, 1)
-          }
+        if (index == -1) {
+          this.mNeedDelete.push(fun)
+        } else {
+          this.mNeedAdd.splice(index, 1)
+        }
       }
     }
     Log.info(`${this.TAG} assembler mNeedAdd = ${this.mNeedAdd}  mNeedDelete = ${this.mNeedDelete}`)

common/src/main/ets/default/function/BaseFunction.ts

@@ -25,6 +25,10 @@ export abstract class BaseFunction {
   protected mWorkerManager: WorkerManager = new WorkerManager();
   protected mEventBus: EventBus = EventBusManager.getInstance().getEventBus();
 
+  abstract load(): void
+
+  abstract unload(): void
+
   protected enableUi(): void {
     this.mWorkerManager.postMessage(Action.uiState(true));
   }
@@ -40,8 +44,4 @@ export abstract class BaseFunction {
   protected disableUiWithMode(uiStateMode: UiStateMode): void {
     this.mWorkerManager.postMessage(Action.uiStateWithMode(false, uiStateMode));
   }
-
-  abstract load(): void
-
-  abstract unload(): void
 }

common/src/main/ets/default/function/CameraBasicFunction.ts

@@ -24,6 +24,7 @@ import ReportUtil from '../utils/ReportUtil';
 import { GlobalContext } from '../utils/GlobalContext';
 
 export class CameraBasicFunction extends BaseFunction {
+  public startIdentification: boolean = false
   private TAG = '[CameraBasicFunction]:';
   private mCameraId: string = CameraId.BACK;
   private mSurfaceId: string = '';
@@ -31,7 +32,78 @@ export class CameraBasicFunction extends BaseFunction {
   private mSessionList: string[] = [];
   private isSessionReleasing: boolean = false
   private initDataCache: any = null
-  public startIdentification: boolean = false
+
+  static getInstance() {
+    if (!globalThis?.cameraBasicMethod) {
+      globalThis.cameraBasicMethod = new CameraBasicFunction()
+    }
+    return globalThis.cameraBasicMethod
+  }
+
+  public async initCamera(data, callType?: string) {
+    GlobalContext.get().setObject('cameraStatus', CameraStatus.CAMERA_BEGIN_INIT);
+    Log.info(`${this.TAG} initCamera this.startIdentification:${JSON.stringify(this.startIdentification)} `);
+    if (this.startIdentification) {
+      const platformCapability = CameraPlatformCapability.getInstance();
+      this.mWorkerManager.postMessage(Action.initCameraDone(platformCapability));
+      return;
+    }
+    if (callType) {
+      this.startIdentification = true
+    }
+    Log.start(`${this.TAG} initCamera`)
+    this.mSessionList.push('CREATE')
+    let curStorageCameraId = AppStorage.Get<string>('storageCameraId')
+    if (curStorageCameraId) {
+      data.cameraId = curStorageCameraId
+    }
+    Log.info(`${this.TAG} initData:${JSON.stringify(data)} `)
+    this.initDataCache = data
+    if (GlobalContext.get().getT<boolean>('isSessionCreating') || this.isSessionReleasing) {
+      Log.info(`${this.TAG} initCamera isSessionCreating or isSessionReleasing return`)
+      return
+    }
+    this.mCameraId = data.cameraId
+    this.mCurrentMode = data.mode
+    let mCameraCount = await this.mCameraService.initCamera(this.mCameraId)
+    const platformCapability = CameraPlatformCapability.getInstance()
+    await platformCapability.init(mCameraCount)
+    this.mWorkerManager.postMessage(Action.initCameraDone(platformCapability))
+    this.mCameraService.getThumbnail(this.functionBackImpl)
+    GlobalContext.get().setObject('cameraStatus', CameraStatus.CAMERA_INIT_FINISHED);
+    this.mWorkerManager.postMessage(Action.updateCameraStatus())
+    Log.end(`${this.TAG} initCamera`)
+  }
+
+  load(): void {
+    Log.info(`${this.TAG} load E`)
+    this.mEventBus.on(Action.ACTION_INIT, this.initCamera.bind(this))
+    this.mEventBus.on(Action.ACTION_CHANGE_IMAGE_SIZE, this.imageSize.bind(this))
+    this.mEventBus.on(Action.ACTION_CHANGE_VIDEO_SIZE, this.videoSize.bind(this))
+    this.mEventBus.on(Action.ACTION_PREPARE_SURFACE, this.onSurfacePrepare.bind(this))
+    this.mEventBus.on(Action.ACTION_START_PREVIEW, this.startPreview.bind(this))
+    this.mEventBus.on(Action.ACTION_RESTART_PREVIEW, this.reStartPreview.bind(this))
+    this.mEventBus.on(Action.ACTION_CHANGE_MODE, this.changeMode.bind(this))
+    this.mEventBus.on(Action.ACTION_SWITCH_CAMERA, this.switchCamera.bind(this))
+    this.mEventBus.on(Action.ACTION_CLOSE_CAMERA, this.close.bind(this))
+    this.mEventBus.on(Action.ACTION_RELOAD_THUMBNAIL, this.reloadThumbnail.bind(this))
+    Log.info(`${this.TAG} load X`)
+  }
+
+  unload(): void {
+    Log.info(`${this.TAG} unload E`)
+    this.mEventBus.off(Action.ACTION_INIT, this.initCamera.bind(this))
+    this.mEventBus.off(Action.ACTION_CHANGE_IMAGE_SIZE, this.imageSize.bind(this))
+    this.mEventBus.off(Action.ACTION_CHANGE_VIDEO_SIZE, this.videoSize.bind(this))
+    this.mEventBus.off(Action.ACTION_PREPARE_SURFACE, this.onSurfacePrepare.bind(this))
+    this.mEventBus.off(Action.ACTION_START_PREVIEW, this.startPreview.bind(this))
+    this.mEventBus.off(Action.ACTION_RESTART_PREVIEW, this.reStartPreview.bind(this))
+    this.mEventBus.off(Action.ACTION_CHANGE_MODE, this.changeMode.bind(this))
+    this.mEventBus.off(Action.ACTION_SWITCH_CAMERA, this.switchCamera.bind(this))
+    this.mEventBus.off(Action.ACTION_CLOSE_CAMERA, this.close.bind(this))
+    this.mEventBus.off(Action.ACTION_RELOAD_THUMBNAIL, this.reloadThumbnail.bind(this))
+    Log.info(`${this.TAG} unload X`)
+  }
 
   private functionBackImpl: FunctionCallBack = {
     onCapturePhotoOutput: (): void => {
@@ -60,39 +132,6 @@ export class CameraBasicFunction extends BaseFunction {
     }
   }
 
-  public async initCamera(data, callType?: string) {
-    GlobalContext.get().setObject('cameraStatus', CameraStatus.CAMERA_BEGIN_INIT);
-    Log.info(`${this.TAG} initCamera this.startIdentification:${JSON.stringify(this.startIdentification)} `);
-    if (this.startIdentification) {
-      const platformCapability = CameraPlatformCapability.getInstance();
-      this.mWorkerManager.postMessage(Action.initCameraDone(platformCapability));
-      return;
-    }
-    if (callType) this.startIdentification = true
-    Log.start(`${this.TAG} initCamera`)
-    this.mSessionList.push('CREATE')
-    let curStorageCameraId = AppStorage.Get<string>('storageCameraId')
-    if (curStorageCameraId) {
-      data.cameraId = curStorageCameraId
-    }
-    Log.info(`${this.TAG} initData:${JSON.stringify(data)} `)
-    this.initDataCache = data
-    if (GlobalContext.get().getT<boolean>('isSessionCreating') || this.isSessionReleasing) {
-      Log.info(`${this.TAG} initCamera isSessionCreating or isSessionReleasing return`)
-      return
-    }
-    this.mCameraId = data.cameraId
-    this.mCurrentMode = data.mode
-    let mCameraCount = await this.mCameraService.initCamera(this.mCameraId)
-    const platformCapability = CameraPlatformCapability.getInstance()
-    await platformCapability.init(mCameraCount)
-    this.mWorkerManager.postMessage(Action.initCameraDone(platformCapability))
-    this.mCameraService.getThumbnail(this.functionBackImpl)
-    GlobalContext.get().setObject('cameraStatus', CameraStatus.CAMERA_INIT_FINISHED);
-    this.mWorkerManager.postMessage(Action.updateCameraStatus())
-    Log.end(`${this.TAG} initCamera`)
-  }
-
   private async imageSize(data) {
     Log.info(`${this.TAG} imageSize ${JSON.stringify(data)}  E`)
     this.mCameraService.mImageSize.imageWidth = data.imageSize.width
@@ -255,41 +294,4 @@ export class CameraBasicFunction extends BaseFunction {
     this.mCameraService.getThumbnail(this.functionBackImpl)
     Log.info(`${this.TAG} loadThumbnail X`)
   }
-
-  static getInstance() {
-    if (!globalThis?.cameraBasicMethod) {
-      globalThis.cameraBasicMethod = new CameraBasicFunction()
-    }
-    return globalThis.cameraBasicMethod
-  }
-
-  load(): void {
-    Log.info(`${this.TAG} load E`)
-    this.mEventBus.on(Action.ACTION_INIT, this.initCamera.bind(this))
-    this.mEventBus.on(Action.ACTION_CHANGE_IMAGE_SIZE, this.imageSize.bind(this))
-    this.mEventBus.on(Action.ACTION_CHANGE_VIDEO_SIZE, this.videoSize.bind(this))
-    this.mEventBus.on(Action.ACTION_PREPARE_SURFACE, this.onSurfacePrepare.bind(this))
-    this.mEventBus.on(Action.ACTION_START_PREVIEW, this.startPreview.bind(this))
-    this.mEventBus.on(Action.ACTION_RESTART_PREVIEW, this.reStartPreview.bind(this))
-    this.mEventBus.on(Action.ACTION_CHANGE_MODE, this.changeMode.bind(this))
-    this.mEventBus.on(Action.ACTION_SWITCH_CAMERA, this.switchCamera.bind(this))
-    this.mEventBus.on(Action.ACTION_CLOSE_CAMERA, this.close.bind(this))
-    this.mEventBus.on(Action.ACTION_RELOAD_THUMBNAIL, this.reloadThumbnail.bind(this))
-    Log.info(`${this.TAG} load X`)
-  }
-
-  unload(): void {
-    Log.info(`${this.TAG} unload E`)
-    this.mEventBus.off(Action.ACTION_INIT, this.initCamera.bind(this))
-    this.mEventBus.off(Action.ACTION_CHANGE_IMAGE_SIZE, this.imageSize.bind(this))
-    this.mEventBus.off(Action.ACTION_CHANGE_VIDEO_SIZE, this.videoSize.bind(this))
-    this.mEventBus.off(Action.ACTION_PREPARE_SURFACE, this.onSurfacePrepare.bind(this))
-    this.mEventBus.off(Action.ACTION_START_PREVIEW, this.startPreview.bind(this))
-    this.mEventBus.off(Action.ACTION_RESTART_PREVIEW, this.reStartPreview.bind(this))
-    this.mEventBus.off(Action.ACTION_CHANGE_MODE, this.changeMode.bind(this))
-    this.mEventBus.off(Action.ACTION_SWITCH_CAMERA, this.switchCamera.bind(this))
-    this.mEventBus.off(Action.ACTION_CLOSE_CAMERA, this.close.bind(this))
-    this.mEventBus.off(Action.ACTION_RELOAD_THUMBNAIL, this.reloadThumbnail.bind(this))
-    Log.info(`${this.TAG} unload X`)
-  }
 }

common/src/main/ets/default/function/RecordFunction.ts

@@ -23,12 +23,26 @@ import { GlobalContext } from '../utils/GlobalContext';
 const TAG = '[RecordFunction]:';
 
 export class RecordFunction extends BaseFunction {
+  load(): void {
+    this.mEventBus.on(Action.ACTION_RECORD_START, this.startRecording.bind(this));
+    this.mEventBus.on(Action.ACTION_RECORD_PAUSE, this.pauseRecording.bind(this));
+    this.mEventBus.on(Action.ACTION_RECORD_RESUME, this.resumeRecording.bind(this));
+    this.mEventBus.on(Action.ACTION_RECORD_STOP, this.stopRecording.bind(this));
+  }
+
+  unload(): void {
+    this.mEventBus.off(Action.ACTION_RECORD_START, this.startRecording.bind(this));
+    this.mEventBus.off(Action.ACTION_RECORD_PAUSE, this.pauseRecording.bind(this));
+    this.mEventBus.off(Action.ACTION_RECORD_RESUME, this.resumeRecording.bind(this));
+    this.mEventBus.off(Action.ACTION_RECORD_STOP, this.stopRecording.bind(this));
+  }
+
   private functionBackImpl: VideoCallBack = {
     videoUri: (videoUri: any): void => {
       Log.info(`${TAG} functionBackImpl videoUri ${videoUri}`);
       this.mWorkerManager.postMessage(Action.updateVideoUri(videoUri));
     },
-    onRecodeError:(data: any): void => {
+    onRecodeError: (data: any): void => {
       this.mWorkerManager.postMessage(Action.recordError());
       this.mWorkerManager.postMessage(Action.reStartPreview(1));
     }
@@ -79,7 +93,8 @@ export class RecordFunction extends BaseFunction {
   private async stopRecording() {
     Log.info(`${TAG} stopRecording E`);
 
-    Log.info(`${TAG} globalThis.startRecording : ${JSON.stringify(GlobalContext.get().getT<boolean>('startRecordingFlag'))}`);
+    Log.info(`${TAG} globalThis.startRecording : ${JSON.stringify(GlobalContext.get()
+      .getT<boolean>('startRecordingFlag'))}`);
     if (GlobalContext.get().getT<boolean>('startRecordingFlag')) {
       return;
     }
@@ -97,18 +112,4 @@ export class RecordFunction extends BaseFunction {
     this.enableUiWithMode(UiStateMode.EXCLUDE_PREVIEW);
     Log.info(`${TAG} stopRecording X`);
   }
-
-  load(): void{
-    this.mEventBus.on(Action.ACTION_RECORD_START, this.startRecording.bind(this));
-    this.mEventBus.on(Action.ACTION_RECORD_PAUSE, this.pauseRecording.bind(this));
-    this.mEventBus.on(Action.ACTION_RECORD_RESUME, this.resumeRecording.bind(this));
-    this.mEventBus.on(Action.ACTION_RECORD_STOP, this.stopRecording.bind(this));
-  }
-
-  unload(): void {
-    this.mEventBus.off(Action.ACTION_RECORD_START, this.startRecording.bind(this));
-    this.mEventBus.off(Action.ACTION_RECORD_PAUSE, this.pauseRecording.bind(this));
-    this.mEventBus.off(Action.ACTION_RECORD_RESUME, this.resumeRecording.bind(this));
-    this.mEventBus.off(Action.ACTION_RECORD_STOP, this.stopRecording.bind(this));
-  }
 }

common/src/main/ets/default/function/ZoomFunction.ts

@@ -20,12 +20,6 @@ import { BaseFunction } from './BaseFunction'
 export class ZoomFunction extends BaseFunction {
   private TAG = '[ZoomFunction]:'
 
-  private async changeZoomRatio(data) {
-    Log.info(`${this.TAG} setZoomRatio ${JSON.stringify(data)}  E`)
-    await this.mCameraService.setZoomRatio(data.zoomRatio)
-    Log.info(`${this.TAG} setZoomRatio X`)
-  }
-
   load(): void {
     Log.info(`${this.TAG} load E`)
     this.mEventBus.on(Action.ACTION_CHANGE_ZOOM_RATIO, this.changeZoomRatio.bind(this))
@@ -37,4 +31,10 @@ export class ZoomFunction extends BaseFunction {
     this.mEventBus.off(Action.ACTION_CHANGE_ZOOM_RATIO, this.changeZoomRatio.bind(this))
     Log.info(`${this.TAG} unload X`)
   }
+
+  private async changeZoomRatio(data) {
+    Log.info(`${this.TAG} setZoomRatio ${JSON.stringify(data)}  E`)
+    await this.mCameraService.setZoomRatio(data.zoomRatio)
+    Log.info(`${this.TAG} setZoomRatio X`)
+  }
 }

common/src/main/ets/default/redux/actions/Action.ts

@@ -116,7 +116,8 @@ export class Action {
   public static readonly ACTION_UPDATE_BIG_VIDEO_TIMER_VISIBLE = 'ACTION_UPDATE_BIG_VIDEO_TIMER_VISIBLE';
   public static readonly ACTION_UPDATE_RECORDING_SPOT_VISIBLE = 'ACTION_UPDATE_RECORDING_SPOT_VISIBLE';
   public static readonly ACTION_UPDATE_OPACITY_VALUE = 'ACTION_UPDATE_OPACITY_VALUE';
-  public static readonly ACTION_UPDATE_SHOW_PRESS_SCROLL_DETAIL_PHOTO_BUTTON = 'ACTION_UPDATE_SHOW_PRESS_SCROLL_DETAIL_PHOTO_BUTTON';
+  public static readonly ACTION_UPDATE_SHOW_PRESS_SCROLL_DETAIL_PHOTO_BUTTON =
+    'ACTION_UPDATE_SHOW_PRESS_SCROLL_DETAIL_PHOTO_BUTTON';
   public static readonly ACTION_UPDATE_SCROLL_DETAILS_BOX = 'ACTION_UPDATE_SCROLL_DETAILS_BOX';
   public static readonly ACTION_INIT_PHOTO_DETAILS_OFFSET_X = 'ACTION_INIT_PHOTO_DETAILS_OFFSET_X';
   public static readonly ACTION_UPDATE_PHOTO_DETAILS_OFFSET_X = 'ACTION_UPDATE_PHOTO_DETAILS_OFFSET_X';

common/src/main/ets/default/redux/core/combineReducers.ts

@@ -23,8 +23,8 @@ export type Reducer = (
 
 export function combineReducers(reducers: Array<Function>): Reducer {
   return function combination(
-    state: OhCombinedState | undefined,
-    action: ActionData
+      state: OhCombinedState | undefined,
+      action: ActionData
   ) {
     const nextState: unknown = {};
     const currentState = state || {};

common/src/main/ets/default/redux/middlewares/EventBusMiddle.ts

@@ -29,8 +29,10 @@ const ACTION_LENGTH: number = 2;
  * @returns (next: Dispatch) => (action: AnyAction) => anyAction
  */
 export const eventBusMiddle: Middleware = () => (next: Dispatch) => (action: ActionData) => {
-  const uiAction = { type: action.type,
-    data: action.data };
+  const uiAction = {
+    type: action.type,
+    data: action.data
+  };
 
   //  EventBusManager.getInstance().getEventBus().emit(action.type, [action.data])
   const result = next(uiAction);

common/src/main/ets/default/redux/store.ts

@@ -36,10 +36,9 @@ import { recordReducer } from './reducers/RecordReducer';
 import type { ZoomState } from './reducers/ZoomReducer';
 import { zoomReducer } from './reducers/ZoomReducer';
 import type { ActionData } from './actions/Action';
-import { applyMiddleware } from './core';
 import type { Enhancer, Reducer } from './core';
+import { applyMiddleware, combineReducers } from './core';
 import { eventBusMiddle } from './middlewares/EventBusMiddle';
-import { combineReducers } from './core';
 
 const TAG = '[store]:';
 const INIT_TAG = 'StoreInit';
@@ -90,12 +89,18 @@ export function getStore(): Store {
 }
 
 export class Store {
+  private static mInstance: Store | undefined = undefined;
   private currentReducer: Reducer;
   private currentState = undefined;
   private currentListeners: (() => void)[] | null = [];
   private nextListeners = this.currentListeners;
   private isDispatching = false;
-  private static mInstance: Store | undefined = undefined;
+
+  private constructor(reducer: Reducer, enhancer: Enhancer) {
+    this.currentReducer = reducer;
+    this.dispatch({ type: INIT_TAG, data: null });
+    this.dispatch = enhancer(this.dispatch.bind(this));
+  }
 
   public static hasStore(): boolean {
     return Store.mInstance !== undefined;
@@ -113,12 +118,6 @@ export class Store {
     return Store.mInstance;
   }
 
-  private constructor(reducer: Reducer, enhancer: Enhancer) {
-    this.currentReducer = reducer;
-    this.dispatch({ type: INIT_TAG, data: null });
-    this.dispatch = enhancer(this.dispatch.bind(this));
-  }
-
   public getState(): OhCombinedState {
     if (this.isDispatching) {
       Log.error('isDispatching get error');
@@ -152,7 +151,8 @@ export class Store {
     if (mapToDispatch) {
       mapToDispatch(this.dispatch as Dispatch);
     }
-    let unsubscribe: () => void = () => {};
+    let unsubscribe: () => void = () => {
+    };
     if (mapToProps) {
       mapToProps(this.currentState);
       unsubscribe = this.stateSubscribe(() => mapToProps(this.currentState));
@@ -168,11 +168,13 @@ export class Store {
   private stateSubscribe(listener: () => void): () => void {
     if (typeof listener !== 'function') {
       Log.error('listener is not function');
-      return () => {};
+      return () => {
+      };
     }
     if (this.isDispatching) {
       Log.error('isDispatching stateSubscribe error');
-      return () => {};
+      return () => {
+      };
     }
     let isSubScribed = true;
 

common/src/main/ets/default/setting/DisplayCalculator.ts

@@ -13,13 +13,14 @@
  * limitations under the License.
  */
 
-import { Log } from '../utils/Log'
+import { Log } from '../utils/Log';
 import deviceInfo from '@ohos.deviceInfo';
 
 export default class DisplayCalculator {
   private static TAG = '[DisplayCalculator]:'
 
-  public static calcSurfaceDisplaySize(screenWidth: number, screenHeight: number, previewWidth: number, previewHeight: number) {
+  public static calcSurfaceDisplaySize(screenWidth: number, screenHeight: number, previewWidth: number,
+    previewHeight: number) {
     const displaySize = {
       width: 1920, height: 1080
     }

common/src/main/ets/default/setting/settingitem/AssistiveGrid.ts

@@ -14,7 +14,7 @@
  */
 
 export default class AssistiveGrid {
-  private static TAG = '[AssistiveGrid]:'
   public static readonly ALIAS = 'AssistiveGrid'
   public static readonly DEFAULT_VALUE = '0'
+  private static TAG = '[AssistiveGrid]:'
 }

common/src/main/ets/default/setting/settingitem/SaveGeoLocation.ts

@@ -14,7 +14,7 @@
  */
 
 export default class SaveGeoLocation {
-  private static TAG = '[SaveGeoLocation]:'
   public static readonly ALIAS = 'SaveGeoLocation'
   public static readonly DEFAULT_VALUE = '1'
+  private static TAG = '[SaveGeoLocation]:'
 }

common/src/main/ets/default/setting/settingitem/SelfMirror.ts

@@ -14,7 +14,7 @@
  */
 
 export default class SelfMirror {
-  private static TAG = '[SelfMirror]:'
   public static readonly ALIAS = 'SelfMirror'
   public static readonly DEFAULT_VALUE = '0'
+  private static TAG = '[SelfMirror]:'
 }

common/src/main/ets/default/setting/settingitem/Timer.ts

@@ -14,7 +14,6 @@
  */
 
 export default class Timer {
-  private static TAG = '[Timer]:'
   public static readonly ALIAS = 'Timer'
   public static readonly TIMER_OFF = 'off'
   public static readonly TIMER_TWO_SECONDS = '2'
@@ -26,30 +25,31 @@ export default class Timer {
   public static readonly RESOURCE_FIVE_SECONDS = $r('app.string.timer_5_seconds')
   public static readonly RESOURCE_TEN_SECONDS = $r('app.string.timer_10_seconds')
   public static readonly RESOURCE_OFF_ALREADY = $r('app.string.already_off')
+  private static TAG = '[Timer]:'
 
   public static convertToResource(timer: string): Resource {
     switch (timer) {
-    case Timer.TIMER_OFF:
-      return Timer.RESOURCE_OFF
-    case Timer.TIMER_TWO_SECONDS:
-      return Timer.RESOURCE_TWO_SECONDS
-    case Timer.TIMER_FIVE_SECONDS:
-      return Timer.RESOURCE_FIVE_SECONDS
-    case Timer.TIMER_TEN_SECONDS:
-      return Timer.RESOURCE_TEN_SECONDS
-    default:
-      return Timer.RESOURCE_OFF
+      case Timer.TIMER_OFF:
+        return Timer.RESOURCE_OFF
+      case Timer.TIMER_TWO_SECONDS:
+        return Timer.RESOURCE_TWO_SECONDS
+      case Timer.TIMER_FIVE_SECONDS:
+        return Timer.RESOURCE_FIVE_SECONDS
+      case Timer.TIMER_TEN_SECONDS:
+        return Timer.RESOURCE_TEN_SECONDS
+      default:
+        return Timer.RESOURCE_OFF
     }
   }
 
   public static convertToString(res: Resource): string {
     if (res.id === Timer.RESOURCE_OFF.id) {
       return Timer.TIMER_OFF
-    } else if(res.id === Timer.RESOURCE_TWO_SECONDS.id) {
+    } else if (res.id === Timer.RESOURCE_TWO_SECONDS.id) {
       return Timer.TIMER_TWO_SECONDS
-    } else if(res.id === Timer.RESOURCE_FIVE_SECONDS.id) {
+    } else if (res.id === Timer.RESOURCE_FIVE_SECONDS.id) {
       return Timer.TIMER_FIVE_SECONDS
-    } else if(res.id === Timer.RESOURCE_TEN_SECONDS.id) {
+    } else if (res.id === Timer.RESOURCE_TEN_SECONDS.id) {
       return Timer.TIMER_TEN_SECONDS
     }
   }

common/src/main/ets/default/setting/settingitem/VideoCodec.ts

@@ -14,7 +14,7 @@
  */
 
 export default class VideoCodec {
-  private static TAG = '[VideoCodec]:'
   public static readonly ALIAS = 'VideoCodec'
   public static readonly DEFAULT_VALUE = '0'
+  private static TAG = '[VideoCodec]:'
 }

common/src/main/ets/default/setting/storage/RdbStoreManager.ts

@@ -16,16 +16,16 @@
 import dataRdb from '@ohos.data.rdb';
 import { GlobalContext } from '../../utils/GlobalContext';
 
-import { Log } from '../../utils/Log'
-import SettingItemInfo from './SettingItemInfo'
+import { Log } from '../../utils/Log';
+import SettingItemInfo from './SettingItemInfo';
 
 const DB_NAME = 'Camera.db'
 const DB_VERSION = 1
 const TABLE_NAME = 'SETTING'
 const CREATE_TABLE = 'CREATE TABLE IF NOT EXISTS SETTING ' +
-'(id INTEGER PRIMARY KEY AUTOINCREMENT, ' +
-'item_name TEXT, ' +
-'item_value TEXT)'
+  '(id INTEGER PRIMARY KEY AUTOINCREMENT, ' +
+  'item_name TEXT, ' +
+  'item_value TEXT)'
 
 /**
  * db manager
@@ -36,6 +36,7 @@ export class RdbStoreManager {
 
   private constructor() {
   }
+
   /**
    * db manager instance
    *
@@ -64,13 +65,6 @@ export class RdbStoreManager {
     Log.info(this.TAG + 'initRdbConfig end');
   }
 
-  private async createTable() {
-    Log.info(this.TAG + 'create table start');
-    Log.info(this.TAG + `RdbStoreConfig.CREATE_TABLE: ${CREATE_TABLE}`);
-    await this.mRdbStore.executeSql(CREATE_TABLE, []);
-    Log.info(this.TAG + 'create table end');
-  }
-
   public async getSettingByItem(itemName: string) {
     Log.info(this.TAG + 'getSettingByItem start');
     const resultList: SettingItemInfo[] = [];
@@ -130,6 +124,13 @@ export class RdbStoreManager {
     return result;
   }
 
+  private async createTable() {
+    Log.info(this.TAG + 'create table start');
+    Log.info(this.TAG + `RdbStoreConfig.CREATE_TABLE: ${CREATE_TABLE}`);
+    await this.mRdbStore.executeSql(CREATE_TABLE, []);
+    Log.info(this.TAG + 'create table end');
+  }
+
   private ifStringIsNull(str): boolean {
     return (str == undefined || str == '' || str == null)
   }

common/src/main/ets/default/setting/storage/SettingItemInfo.ts

@@ -14,7 +14,6 @@
  */
 
 export default class SettingItemInfo {
-
   /**
    * itemName
    */

common/src/main/ets/default/utils/ComponentPosition.ts

@@ -34,24 +34,27 @@ export class ComponentPosition {
   private static foldControlHeight: number = 650
   private static controlItemHeight: number = 32
 
-  public static previewPosition(screenWidth: number, screenHeight: number, previewWidth: number, previewHeight: number) {
+  public static previewPosition(screenWidth: number, screenHeight: number, previewWidth: number,
+    previewHeight: number) {
     Log.info(`${this.TAG} previewPosition `)
-    let position = (Math.abs(screenWidth - previewWidth)  < 1) ? { x: 0, y: (screenHeight - previewHeight) / 2}
-                                                       : { x: (screenWidth - previewWidth) / 2, y: 0 }
+    let position = (Math.abs(screenWidth - previewWidth) < 1) ? { x: 0, y: (screenHeight - previewHeight) / 2 }
+      : { x: (screenWidth - previewWidth) / 2, y: 0 }
     return position
   }
 
-  public static previewTabletPosition(screenWidth: number, screenHeight: number, previewWidth: number, previewHeight: number) {
+  public static previewTabletPosition(screenWidth: number, screenHeight: number, previewWidth: number,
+    previewHeight: number) {
     Log.info(`${this.TAG} previewTabletPosition ` + previewHeight + previewWidth)
-    if ((screenHeight == previewHeight &&  previewWidth > previewHeight)) {
-      return {x: 0, y: 0}
+    if ((screenHeight == previewHeight && previewWidth > previewHeight)) {
+      return { x: 0, y: 0 }
     }
-    let position = (Math.abs(screenWidth - previewWidth)  < 1) ? { x: 0, y: (screenHeight - previewHeight) / 2}
-                                                               : { x: (screenWidth - previewWidth) / 2, y: 0 }
+    let position = (Math.abs(screenWidth - previewWidth) < 1) ? { x: 0, y: (screenHeight - previewHeight) / 2 }
+      : { x: (screenWidth - previewWidth) / 2, y: 0 }
     return position
   }
 
-  public static footBarPosition(screenWidth: number, screenHeight: number, previewWidth: number, previewHeight: number) {
+  public static footBarPosition(screenWidth: number, screenHeight: number, previewWidth: number,
+    previewHeight: number) {
     Log.info(`${this.TAG} footBarPosition `)
     if (screenWidth == previewWidth && (3 * previewWidth > 4 * previewHeight)) {
       let previewSize = DisplayCalculator.calcSurfaceDisplaySize(screenWidth, screenHeight, 4, 3)
@@ -60,7 +63,7 @@ export class ComponentPosition {
     }
     let position = screenWidth <= previewWidth + this.footBarInPreviewMaxMargin * 2 ?
       { x: (screenWidth / 2 + previewWidth / 2 - this.footBarComponentWidth), y: 0 } :
-      { x: (screenWidth * 3 / 4 + previewWidth / 4 - this.footBarComponentWidth / 2), y: 0}
+      { x: (screenWidth * 3 / 4 + previewWidth / 4 - this.footBarComponentWidth / 2), y: 0 }
     return position
   }
 
@@ -73,17 +76,17 @@ export class ComponentPosition {
     }
     let xPosition: number = (screenWidth == previewWidth) ? this.tabBarLeftDistance :
       ((screenWidth >= previewWidth + this.tabBarInPreviewMaxMargin * 2) ?
-      ((screenWidth - previewWidth) / 4) - this.tarBarWidth / 2  :
-      ((screenWidth - previewWidth) / 2) + this.tabBarLeftDistance)
+        ((screenWidth - previewWidth) / 4) - this.tarBarWidth / 2 :
+        ((screenWidth - previewWidth) / 2) + this.tabBarLeftDistance)
     let yPosition: number = (screenWidth * 9 <= screenHeight * 16) ?
       (screenHeight / 2 + screenWidth * 9 / 32 - this.tarBarHeight) :
       (screenHeight - this.tarBarHeight - this.tabBarBottomDistance)
-    let position = { x: xPosition, y: 44}
+    let position = { x: xPosition, y: 44 }
     return position
   }
 
   public static zoomViewPosition(screenWidth: number, screenHeight: number, previewWidth: number, previewHeight: number,
-                                 videoState: string) {
+    videoState: string) {
     Log.info(`${this.TAG} zoomViewPosition `)
     let zoomViewWidth: number
     let shutterButtonWidth: number
@@ -102,7 +105,7 @@ export class ComponentPosition {
     let xPosition: number = 0;
     if (screenWidth < previewWidth + this.footBarInPreviewMaxMargin * 2) {
       xPosition = (screenWidth / 2 + previewWidth / 2 - ((this.footBarComponentWidth + this.zoomViewComponentWidth
-      + zoomViewWidth + shutterButtonWidth) / 2 + this.zoomViewRightDistance))
+        + zoomViewWidth + shutterButtonWidth) / 2 + this.zoomViewRightDistance))
     } else if (screenWidth < previewWidth + zoomViewWidth * 4 + shutterButtonWidth * 2) {
       xPosition = screenWidth / 2 + previewWidth / 2 - this.zoomViewToPreview
     } else {
@@ -134,7 +137,7 @@ export class ComponentPosition {
   }
 
   public static getFootBarHeight(screenWidth: number, screenHeight: number, previewHeight: number) {
-    let x =  this.getShutterButtonMargin(screenWidth, screenHeight, previewHeight) * 2 + 164
+    let x = this.getShutterButtonMargin(screenWidth, screenHeight, previewHeight) * 2 + 164
     return x
   }
 
@@ -144,7 +147,7 @@ export class ComponentPosition {
       return 0
     }
     let previewSize = DisplayCalculator.calcSurfaceDisplaySize(screenWidth, screenHeight, 4, 3)
-    let x =  previewSize.height * 12 / 100 - 48
+    let x = previewSize.height * 12 / 100 - 48
     return x
   }
 

common/src/main/ets/default/utils/DateTimeUtil.ts

@@ -17,12 +17,11 @@
  * @file: 日期工具
  */
 export default class DateTimeUtil {
-
   /**
-     * 时分秒
-     *
-     * @return {string} - 返回时分秒
-     */
+   * 时分秒
+   *
+   * @return {string} - 返回时分秒
+   */
   getTime() {
     const DATETIME = new Date();
     const HOURS = DATETIME.getHours();
@@ -32,10 +31,10 @@ export default class DateTimeUtil {
   }
 
   /**
-     * 年月日
-     *
-     * @return {string} - 返回年月日
-     */
+   * 年月日
+   *
+   * @return {string} - 返回年月日
+   */
   getDate() {
     const DATETIME = new Date();
     const YEAR = DATETIME.getFullYear();
@@ -45,35 +44,35 @@ export default class DateTimeUtil {
   }
 
   /**
-     * 日期不足两位补 0
-     *
-     * @param {string} value - 数据值
-     * @return {string} - 日期不足两位补 0
-     */
+   * 日期不足两位补 0
+   *
+   * @param {string} value - 数据值
+   * @return {string} - 日期不足两位补 0
+   */
   fill(value): string {
     return (value > 9 ? '' : '0') + value;
   }
 
   /**
-     * 年月日格式修饰
-     *
-     * @param {string} year - 年
-     * @param {string} month - 月
-     * @param {string} date - 日
-     * @return {string} - 年月日格式修饰
-     */
+   * 年月日格式修饰
+   *
+   * @param {string} year - 年
+   * @param {string} month - 月
+   * @param {string} date - 日
+   * @return {string} - 年月日格式修饰
+   */
   concatDate(year, month, date) {
     return `${year}${month}${date}`;
   }
 
   /**
-     * 时分秒格式修饰
-     *
-     * @param {string} hours - 时
-     * @param {string} minutes - 分
-     * @param {string} seconds - 秒
-     * @return {string} - 时分秒格式修饰
-     */
+   * 时分秒格式修饰
+   *
+   * @param {string} hours - 时
+   * @param {string} minutes - 分
+   * @param {string} seconds - 秒
+   * @return {string} - 时分秒格式修饰
+   */
   concatTime(hours, minutes, seconds) {
     return `${this.fill(hours)}${this.fill(minutes)}${this.fill(seconds)}`;
   }

common/src/main/ets/default/utils/GlobalContext.ts

@@ -22,10 +22,6 @@ import { Log } from './Log';
 
 export class GlobalContext {
   private static TAG: string = '[GlobalContext]:';
-
-  private constructor() {
-  }
-
   private static instance: GlobalContext;
   private _objects = new Map<string, Object>();
   private mDisplay: display.Display | undefined = undefined;
@@ -44,6 +40,9 @@ export class GlobalContext {
   private cameraUIExtensionContentSession: UIExtensionContentSession;
   private pickerUri: string;
 
+  private constructor() {
+  }
+
   public static get(): GlobalContext {
     if (!Boolean(GlobalContext.instance).valueOf()) {
       GlobalContext.instance = new GlobalContext();

common/src/main/ets/default/utils/Log.ts

@@ -92,11 +92,6 @@ export class Log {
     hiTraceMeter.startTrace(methodName, taskId);
   }
 
-  private static init(): void {
-    globalThis.taskIdMap = new Map<string, number>();
-    globalThis.traceIndex = TRACE_BASE_INDEX;
-  }
-
   static end(methodName: string): void {
     this.info(methodName + TRACE_LOG_END);
     if (!RECORD_TRACE) {
@@ -112,4 +107,9 @@ export class Log {
     }
     hiTraceMeter.finishTrace(methodName, taskId);
   }
+
+  private static init(): void {
+    globalThis.taskIdMap = new Map<string, number>();
+    globalThis.traceIndex = TRACE_BASE_INDEX;
+  }
 }

common/src/main/ets/default/worker/AsyncManager.ts

@@ -26,9 +26,9 @@ export interface Message {
 }
 
 export class AsyncManager {
+  protected mWorker: any;
   private workerName: string;
   private workerUri: string;
-  protected mWorker: any;
   private appEventBus: EventBus = EventBusManager.getWorkerInstance().getEventBus();
   private _appEventBus: EventBus = EventBusManager.getCameraInstance().getEventBus();
 
@@ -60,11 +60,10 @@ export class AsyncManager {
   //    this.mWorker.onexit = this.onexit.bind(this)
   //  }
 
-  private initWorker(): void {
-    this._appEventBus.on('WORKER_TO_MAIN', (...args) => {
-      Log.info(`${TAG} mWorker.onmessage`);
-      this.onMessage(args[0]);
-    })
+  // 向worker线程发送消息
+  public postMessage(msg: Message): void {
+    Log.info(`${TAG} postMessage`);
+    this.appEventBus.emit('MAIN_TO_WORKER', [msg]);
   }
 
   //todo 预留实现，待能力稳定后开放
@@ -74,12 +73,6 @@ export class AsyncManager {
   //    return this
   //  }
 
-  // 向worker线程发送消息
-  public postMessage(msg: Message): void {
-    Log.info(`${TAG} postMessage`);
-    this.appEventBus.emit('MAIN_TO_WORKER', [msg]);
-  }
-
   // 接收worker线程返回的UiData
   public onMessage(msg: Message): void {
     Log.info(`${TAG} onMessage uidata: ${JSON.stringify(msg.data)}`);
@@ -96,4 +89,11 @@ export class AsyncManager {
   public onexit(msg: Message): void {
 
   }
+
+  private initWorker(): void {
+    this._appEventBus.on('WORKER_TO_MAIN', (...args) => {
+      Log.info(`${TAG} mWorker.onmessage`);
+      this.onMessage(args[0]);
+    })
+  }
 }

common/src/main/ets/default/worker/eventbus/EventBus.ts

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { Log } from '../../utils/Log'
+import { Log } from '../../utils/Log';
 
 type Callback = (args: any) => void
 
@@ -25,11 +25,11 @@ export class EventBus {
   }
 
   /**
-    * Register events and handlers
-    *
-    * @param event event to handle.
-    * @param callback event related callbacck
-    */
+   * Register events and handlers
+   *
+   * @param event event to handle.
+   * @param callback event related callbacck
+   */
   public on(event: string | string[], callback: Callback): void {
     Log.info(`${this.TAG} on event = ${JSON.stringify(event)}  ${JSON.stringify(callback)}`);
     if (Array.isArray(event)) {
@@ -48,11 +48,11 @@ export class EventBus {
   }
 
   /**
-    * Register events and processing functions, and destroy them after triggering once
-    *
-    * @param event event to handle
-    * @param callback event related callback
-    */
+   * Register events and processing functions, and destroy them after triggering once
+   *
+   * @param event event to handle
+   * @param callback event related callback
+   */
   public once(event: string | string[], callback: Callback): void {
     const _self = this
 
@@ -67,11 +67,11 @@ export class EventBus {
   }
 
   /**
-    * Destroy events and handlers
-    *
-    * @param event event to handle
-    * @param callback event related callback
-    */
+   * Destroy events and handlers
+   *
+   * @param event event to handle
+   * @param callback event related callback
+   */
   public off(event: string | string[], callback: Callback | undefined): void {
     // Array cyclic emptying
     if (Array.isArray(event)) {
@@ -96,11 +96,11 @@ export class EventBus {
   }
 
   /**
-    * Trigger all callbacks of an event with parameters
-    *
-    * @param event event to handle
-    * @param argument parameter for the related callback
-    */
+   * Trigger all callbacks of an event with parameters
+   *
+   * @param event event to handle
+   * @param argument parameter for the related callback
+   */
   public emit(event: string, argument: any): void {
     // once deleting the event will cause this in the following loop this._events moves forward in fn,
     // so it is copied here as a new array

hvigor/hvigor-config.json5

@@ -1,6 +1,5 @@
 {
-  "hvigorVersion": "3.0.9",
+  "modelVersion": "5.0.2",
   "dependencies": {
-    "@ohos/hvigor-ohos-plugin": "3.0.9"
   }
 }

hvigorw

@@ -1,48 +0,0 @@
-#!/bin/bash
-
-# ----------------------------------------------------------------------------
-#  Hvigor startup script, version 1.0.0
-# 
-#  Required ENV vars:
-#  ------------------
-#    NODE_HOME - location of a Node home dir
-#    or 
-#    Add /usr/local/nodejs/bin to the PATH environment variable
-# ----------------------------------------------------------------------------
-
-HVIGOR_APP_HOME=$(dirname $(readlink -f $0))
-HVIGOR_WRAPPER_SCRIPT=${HVIGOR_APP_HOME}/hvigor/hvigor-wrapper.js
-warn() {
-	echo ""
-	echo -e "\033[1;33m`date '+[%Y-%m-%d %H:%M:%S]'`$@\033[0m"
-}
-
-error() {
-	echo ""
-	echo -e "\033[1;31m`date '+[%Y-%m-%d %H:%M:%S]'`$@\033[0m"
-}
-
-fail() {
-	error "$@"
-	exit 1
-}
-
-# Determine node to start hvigor wrapper script
-if [ -n "${NODE_HOME}" ];then
-   EXECUTABLE_NODE="${NODE_HOME}/bin/node"
-   if [ ! -x "$EXECUTABLE_NODE" ];then
-       fail "ERROR: NODE_HOME is set to an invalid directory,check $NODE_HOME\n\nPlease set NODE_HOME in your environment to the location where your nodejs installed"
-   fi
-else
-   EXECUTABLE_NODE="node"
-   which ${EXECUTABLE_NODE} > /dev/null 2>&1 || fail "ERROR: NODE_HOME is not set and not 'node' command found in your path"
-fi
-
-# Check hvigor wrapper script
-if [ ! -r "$HVIGOR_WRAPPER_SCRIPT" ];then
-	fail "ERROR: Couldn't find hvigor/hvigor-wrapper.js in ${HVIGOR_APP_HOME}"
-fi
-
-# start hvigor-wrapper script
-exec "${EXECUTABLE_NODE}" \
-	"${HVIGOR_WRAPPER_SCRIPT}" "$@"

hvigorw.bat

@@ -1,57 +0,0 @@
-@if "%DEBUG%" == "" @echo off
-@rem ##########################################################################
-@rem
-@rem  Hvigor startup script for Windows
-@rem
-@rem ##########################################################################
-
-@rem Set local scope for the variables with windows NT shell
-if "%OS%"=="Windows_NT" setlocal
-
-set DIRNAME=%~dp0
-if "%DIRNAME%" == "" set DIRNAME=.
-set APP_BASE_NAME=%~n0
-set APP_HOME=%DIRNAME%
-
-@rem Resolve any "." and ".." in APP_HOME to make it shorter.
-for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
-
-set WRAPPER_MODULE_PATH=%APP_HOME%\hvigor\hvigor-wrapper.js
-set NODE_EXE=node.exe
-
-goto start
-
-:start
-@rem Find node.exe
-if defined NODE_HOME goto findNodeFromNodeHome
-
-%NODE_EXE% --version >NUL 2>&1
-if "%ERRORLEVEL%" == "0" goto execute
-
-echo.
-echo ERROR: NODE_HOME is not set and no 'node' command could be found in your PATH.
-echo.
-echo Please set the NODE_HOME variable in your environment to match the
-echo location of your NodeJs installation.
-
-goto fail
-
-:findNodeFromNodeHome
-set NODE_HOME=%NODE_HOME:"=%
-set NODE_EXE_PATH=%NODE_HOME%/%NODE_EXE%
-
-if exist "%NODE_EXE_PATH%" goto execute
-echo.
-echo ERROR: NODE_HOME is not set and no 'node' command could be found in your PATH.
-echo.
-echo Please set the NODE_HOME variable in your environment to match the
-echo location of your NodeJs installation.
-
-goto fail
-
-:execute
-@rem Execute hvigor
-"%NODE_EXE%" %WRAPPER_MODULE_PATH% %*
-
-:fail
-exit /b 1

oh-package.json5

@@ -1,5 +1,5 @@
 {
-  "modelVersion": "5.0.1",
+  "modelVersion": "5.0.2",
   "license": "ISC",
   "devDependencies": {
     "@ohos/hypium": "1.0.6"

product/phone/src/main/ets/MainAbility/ExtensionPickerAbility.ts

@@ -23,7 +23,6 @@ import { GlobalContext } from '@ohos/common/src/main/ets/default/utils/GlobalCon
 import UIExtensionAbility from '@ohos.app.ability.UIExtensionAbility';
 import Want from '@ohos.app.ability.Want';
 import UIExtensionContentSession from '@ohos.app.ability.UIExtensionContentSession';
-import hilog from '@ohos.hilog';
 
 export default class ExtensionPickerAbility extends UIExtensionAbility {
   private cameraBasicFunction: any = null;

product/phone/src/main/ets/MainAbility/MainAbility.ts

@@ -95,14 +95,14 @@ export default class MainAbility extends Ability {
     })
 
     if (this.launchWant?.action === wantConstant.Action.ACTION_IMAGE_CAPTURE ||
-    this.launchWant?.parameters?.action === wantConstant.Action.ACTION_IMAGE_CAPTURE) {
+      this.launchWant?.parameters?.action === wantConstant.Action.ACTION_IMAGE_CAPTURE) {
       GlobalContext.get().setCameraFormParam({
         action: 'capture',
         cameraPosition: 'PHOTO',
         mode: 'PHOTO'
       });
     } else if (this.launchWant?.action === wantConstant.Action.ACTION_VIDEO_CAPTURE ||
-    this.launchWant?.parameters?.action === wantConstant.Action.ACTION_VIDEO_CAPTURE) {
+      this.launchWant?.parameters?.action === wantConstant.Action.ACTION_VIDEO_CAPTURE) {
       GlobalContext.get().setCameraFormParam({
         action: 'video',
         cameraPosition: 'VIDEO',

product/phone/src/main/ets/common/ModeConfig.ts

@@ -19,10 +19,10 @@ export class ModeConfig {
 
   public getPaddingConfig(mode: string): PaddingData {
     switch (mode) {
-    case 'PHOTO':
-      return this.photoPadding
-    case 'VIDEO':
-      return this.videoPadding
+      case 'PHOTO':
+        return this.photoPadding
+      case 'VIDEO':
+        return this.videoPadding
     }
   }
 }

product/phone/src/main/ets/pages/BigVideoTimer.ets

@@ -17,8 +17,7 @@ import { Action } from '@ohos/common/src/main/ets/default/redux/actions/Action';
 import { EventBus } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBus';
 import { EventBusManager } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBusManager';
 import { Log } from '@ohos/common/src/main/ets/default/utils/Log';
-import { Dispatch, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
-import { getStore } from '@ohos/common/src/main/ets/default/redux/store';
+import { Dispatch, getStore, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
 import { GlobalContext } from '@ohos/common/src/main/ets/default/utils/GlobalContext';
 
 class StateStruct {
@@ -30,8 +29,6 @@ class StateStruct {
 }
 
 class BigVideoTimerDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -63,32 +60,20 @@ class BigVideoTimerDispatcher {
     this.mDispatch(Action.updateSmallVideoTimerVisible(false))
     this.mDispatch(Action.updateScreenStatus(false))
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 
 @Component
 export struct BigVideoTimer {
+  @State state: StateStruct = new StateStruct()
   private TAG: string = '[BigVideoTimer]'
   private timer: number = 0
   private timerTick: number = 0
   private appEventBus: EventBus = EventBusManager.getInstance().getEventBus()
-  @State state: StateStruct = new StateStruct()
   private mAction: BigVideoTimerDispatcher = new BigVideoTimerDispatcher();
 
-  private async onRecordPaused(): Promise<void> {
-    Log.info(`${this.TAG} onRecordPaused timer id: ${this.timer} E`)
-    clearInterval(this.timer)
-    Log.info(`${this.TAG} onRecordPaused X`)
-  }
-
-  private async onRecordResumed(): Promise<void> {
-    Log.info(`${this.TAG} onRecordResumed E`)
-    if (this.state.recordingTime <= 2) {
-      this.setIntervalTimer()
-    }
-    Log.info(`${this.TAG} onRecordResumed X`)
-  }
-
   aboutToAppear(): void {
     Log.info(`${this.TAG} aboutToAppear E`)
     getStore().subscribe((state: OhCombinedState) => {
@@ -118,48 +103,6 @@ export struct BigVideoTimer {
     Log.info(`${this.TAG} aboutToDisappear X`)
   }
 
-  private setIntervalTimer(): void {
-    clearInterval(this.timer)
-    this.timer = setInterval(() => {
-      this.timerTick++
-      if (this.timerTick % 2 === 0) {
-        this.mAction.updateRecordingTime(this.state.recordingTime + 1)
-        let shownSec = '00'
-        let shownMin = '00'
-        let sec = this.state.recordingTime % 60
-        if (sec < 10) {
-          shownSec = `0${sec}`
-        } else {
-          shownSec = `${sec}`
-        }
-        let minute = Math.floor(this.state.recordingTime / 60)
-        if (minute < 10) {
-          shownMin = `0${minute}`
-        } else {
-          shownMin = `${minute}`
-        }
-        this.mAction.updateRecordingTimeDisplay(`${shownMin}:${shownSec}`)
-        if (this.state.recordingTime > 2) {
-          clearInterval(this.timer)
-          this.mAction.updateSmallVideoTimerVisible(true)
-          this.mAction.updateBigVideoTimerVisible(false)
-        }
-      }
-      this.mAction.updateRecordingSpotVisible(!this.state.isRecordingSpotVisible)
-      if (this.state.isThirdPartyCall && GlobalContext.get().getCameraAbilityWant().parameters?.videoDuration) {
-        try {
-          let videoDuration: number = Number.parseInt(GlobalContext.get().getCameraAbilityWant().parameters?.videoDuration as string)
-          Log.info(`${this.TAG} videoDuration is ${videoDuration}`);
-          if (this.state.recordingTime >= videoDuration) {
-            this.mAction.stopRecording();
-          }
-        } catch (error) {
-          Log.info(`${this.TAG} picker videoDuration --> ${JSON.stringify(error)}}`)
-        }
-      }
-    }, 500)
-  }
-
   build() {
     Column() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -200,4 +143,61 @@ export struct BigVideoTimer {
       }
     }.width('100%').height(96).position({ x: 0, y: 0 })
   }
+
+  private async onRecordPaused(): Promise<void> {
+    Log.info(`${this.TAG} onRecordPaused timer id: ${this.timer} E`)
+    clearInterval(this.timer)
+    Log.info(`${this.TAG} onRecordPaused X`)
+  }
+
+  private async onRecordResumed(): Promise<void> {
+    Log.info(`${this.TAG} onRecordResumed E`)
+    if (this.state.recordingTime <= 2) {
+      this.setIntervalTimer()
+    }
+    Log.info(`${this.TAG} onRecordResumed X`)
+  }
+
+  private setIntervalTimer(): void {
+    clearInterval(this.timer)
+    this.timer = setInterval(() => {
+      this.timerTick++
+      if (this.timerTick % 2 === 0) {
+        this.mAction.updateRecordingTime(this.state.recordingTime + 1)
+        let shownSec = '00'
+        let shownMin = '00'
+        let sec = this.state.recordingTime % 60
+        if (sec < 10) {
+          shownSec = `0${sec}`
+        } else {
+          shownSec = `${sec}`
+        }
+        let minute = Math.floor(this.state.recordingTime / 60)
+        if (minute < 10) {
+          shownMin = `0${minute}`
+        } else {
+          shownMin = `${minute}`
+        }
+        this.mAction.updateRecordingTimeDisplay(`${shownMin}:${shownSec}`)
+        if (this.state.recordingTime > 2) {
+          clearInterval(this.timer)
+          this.mAction.updateSmallVideoTimerVisible(true)
+          this.mAction.updateBigVideoTimerVisible(false)
+        }
+      }
+      this.mAction.updateRecordingSpotVisible(!this.state.isRecordingSpotVisible)
+      if (this.state.isThirdPartyCall && GlobalContext.get().getCameraAbilityWant().parameters?.videoDuration) {
+        try {
+          let videoDuration: number =
+            Number.parseInt(GlobalContext.get().getCameraAbilityWant().parameters?.videoDuration as string)
+          Log.info(`${this.TAG} videoDuration is ${videoDuration}`);
+          if (this.state.recordingTime >= videoDuration) {
+            this.mAction.stopRecording();
+          }
+        } catch (error) {
+          Log.info(`${this.TAG} picker videoDuration --> ${JSON.stringify(error)}}`)
+        }
+      }
+    }, 500)
+  }
 }

product/phone/src/main/ets/pages/Control.ets

@@ -16,8 +16,7 @@
 import { Action } from '@ohos/common/src/main/ets/default/redux/actions/Action';
 import { EventBus } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBus';
 import { EventBusManager } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBusManager';
-import { Dispatch, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
-import { getStore } from '@ohos/common/src/main/ets/default/redux/store';
+import { Dispatch, getStore, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
 import { Log } from '@ohos/common/src/main/ets/default/utils/Log';
 import {
   PersistType,
@@ -36,8 +35,6 @@ class StateStruct {
 }
 
 class ControlDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -67,6 +64,8 @@ class ControlDispatcher {
   public updateListStatus(enable: boolean): void {
     this.mDispatch(Action.uiState(enable));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 class SwipeModeIndexStruct {
@@ -76,17 +75,17 @@ class SwipeModeIndexStruct {
 
 @Component
 export struct Control {
-  private TAG: string = '[Control]';
   appEventBus: EventBus = EventBusManager.getInstance().getEventBus();
-  private scroller: Scroller = new Scroller();
-  private modeArray: Array<string> = ['PHOTO', 'VIDEO'];
-  private itemWidth: number = 56;
-  protected mPreferencesService: PreferencesService = PreferencesService.getInstance();
   @State state: StateStruct = new StateStruct();
-  private mAction: ControlDispatcher = new ControlDispatcher();
   @State startScroll: number = 0;
   @State endScroll: number = 0;
   @State index: number = 0;
+  protected mPreferencesService: PreferencesService = PreferencesService.getInstance();
+  private TAG: string = '[Control]';
+  private scroller: Scroller = new Scroller();
+  private modeArray: Array<string> = ['PHOTO', 'VIDEO'];
+  private itemWidth: number = 56;
+  private mAction: ControlDispatcher = new ControlDispatcher();
 
   aboutToAppear(): void {
     Log.info(`${this.TAG} aboutToAppear E`);
@@ -115,36 +114,11 @@ export struct Control {
     Log.info(`${this.TAG} aboutToDisappear X`);
   }
 
-  private changeToMode(modeIndex: number): void {
-    Log.info(`${this.TAG} changeToMode modeIndex: ${modeIndex} E`);
-    this.scroller.scrollToIndex(modeIndex);
-    if (this.modeArray[modeIndex] !== this.state.mode) {
-      Log.info(`${this.TAG} this.state.changeToMode(${this.modeArray[modeIndex]})`);
-      this.mAction.changeToMode(this.modeArray[modeIndex]);
-      this.mPreferencesService.putModeValue(PersistType.FOR_AWHILE, modeIndex);
-      this.mPreferencesService.flushMode();
-    } else {
-      this.mAction.updateListStatus(true);
-    }
-    Log.info(`${this.TAG} changeToMode X`);
-  }
-
-  private getModeFontWeight(modeIndex: number): FontWeight {
-    if (this.state.mode === this.modeArray[modeIndex]) {
-      return FontWeight.Bold;
-    } else {
-      return FontWeight.Regular;
-    }
-  }
-
-  private swipeChangeMode(data: SwipeModeIndexStruct): void {
-    this.changeToMode(data.swipeModeIndex);
-  }
-
   build() {
     Column() {
       Stack({ alignContent: Alignment.BottomStart }) {
-        if ((this.state.isThirdPartyCall || this.state.isFaCall) && this.state.mode === 'PHOTO' && (this.state.thirdCallAction != 'ALL')) {
+        if ((this.state.isThirdPartyCall || this.state.isFaCall) && this.state.mode === 'PHOTO' &&
+          (this.state.thirdCallAction != 'ALL')) {
           Row() {
             Text($r('app.string.photo_mode'))
               .width('100%')
@@ -154,7 +128,8 @@ export struct Control {
               .fontWeight(FontWeight.Bold)
               .textAlign(TextAlign.Center)
           }.width('100%').height('100%').offset({ x: -156, y: 0 })
-        } else if ((this.state.isThirdPartyCall || this.state.isFaCall) && this.state.mode === 'VIDEO' && (this.state.thirdCallAction != 'ALL')) {
+        } else if ((this.state.isThirdPartyCall || this.state.isFaCall) && this.state.mode === 'VIDEO' &&
+          (this.state.thirdCallAction != 'ALL')) {
           Row() {
             Text($r('app.string.video_mode'))
               .width('100%')
@@ -225,4 +200,30 @@ export struct Control {
       }.width('100%').height(58)
     }
   }
+
+  private changeToMode(modeIndex: number): void {
+    Log.info(`${this.TAG} changeToMode modeIndex: ${modeIndex} E`);
+    this.scroller.scrollToIndex(modeIndex);
+    if (this.modeArray[modeIndex] !== this.state.mode) {
+      Log.info(`${this.TAG} this.state.changeToMode(${this.modeArray[modeIndex]})`);
+      this.mAction.changeToMode(this.modeArray[modeIndex]);
+      this.mPreferencesService.putModeValue(PersistType.FOR_AWHILE, modeIndex);
+      this.mPreferencesService.flushMode();
+    } else {
+      this.mAction.updateListStatus(true);
+    }
+    Log.info(`${this.TAG} changeToMode X`);
+  }
+
+  private getModeFontWeight(modeIndex: number): FontWeight {
+    if (this.state.mode === this.modeArray[modeIndex]) {
+      return FontWeight.Bold;
+    } else {
+      return FontWeight.Regular;
+    }
+  }
+
+  private swipeChangeMode(data: SwipeModeIndexStruct): void {
+    this.changeToMode(data.swipeModeIndex);
+  }
 }

product/phone/src/main/ets/pages/FootBar.ets

@@ -18,8 +18,7 @@ import { Action } from '@ohos/common/src/main/ets/default/redux/actions/Action';
 import { CameraSwitchButton } from '@ohos/common/src/main/ets/default/featurecommon/cameraswitcher/CameraSwitchButton';
 import { EventBus } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBus';
 import { EventBusManager } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBusManager';
-import { Dispatch, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
-import { getStore } from '@ohos/common/src/main/ets/default/redux/store';
+import { Dispatch, getStore, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
 import { Log } from '@ohos/common/src/main/ets/default/utils/Log';
 import { ShutterButton } from '@ohos/common/src/main/ets/default/featurecommon/shutterbutton/ShutterButton';
 import { ThumbnailView } from '@ohos/common/src/main/ets/default/featurecommon/thumbnail/ThumbnailView';
@@ -34,31 +33,21 @@ class StateStruct {
 }
 
 class FootBarDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export struct FootBar {
-  private TAG: string = '[FootBar]:';
   @State state: StateStruct = new StateStruct();
   @State isRecording: boolean = false;
+  private TAG: string = '[FootBar]:';
   private appEventBus: EventBus = EventBusManager.getInstance().getEventBus();
   private mAction: FootBarDispatcher = new FootBarDispatcher();
 
-  private async onRecordStart(): Promise<void> {
-    this.isRecording = true
-    Log.info(`${this.TAG} onRecordStart`)
-  }
-
-  private async onRecordStop(): Promise<void> {
-    this.isRecording = false
-    Log.info(`${this.TAG} onRecordStop`)
-  }
-
   aboutToAppear(): void {
     Log.info(`${this.TAG} aboutToAppear E`)
     getStore().subscribe((state: OhCombinedState) => {
@@ -85,20 +74,6 @@ export struct FootBar {
     Log.info(`${this.TAG} aboutToDisappear X`)
   }
 
-  private isThumbnailViewVisibility(): boolean {
-    return!this.isRecording && !this.state.isThirdPartyCall &&
-    this.state.videoState !== "startTakeVideo" && this.state.videoState !== "pauseTakeVideo"
-  }
-
-  private isPhoneSwitchShow(): boolean {
-    if (this.state.platformCapability) {
-      return deviceInfo.deviceType !== 'default' && this.state.platformCapability?.mCameraCount > 1 &&
-      !this.isRecording
-    } else {
-      return false;
-    }
-  }
-
   build() {
     Flex({
       direction: FlexDirection.Row,
@@ -125,4 +100,28 @@ export struct FootBar {
     .padding({ top: 10, bottom: 10 })
     .visibility(this.state.showZoomLabelValue ? Visibility.Visible : Visibility.Hidden)
   }
+
+  private async onRecordStart(): Promise<void> {
+    this.isRecording = true
+    Log.info(`${this.TAG} onRecordStart`)
+  }
+
+  private async onRecordStop(): Promise<void> {
+    this.isRecording = false
+    Log.info(`${this.TAG} onRecordStop`)
+  }
+
+  private isThumbnailViewVisibility(): boolean {
+    return !this.isRecording && !this.state.isThirdPartyCall &&
+      this.state.videoState !== "startTakeVideo" && this.state.videoState !== "pauseTakeVideo"
+  }
+
+  private isPhoneSwitchShow(): boolean {
+    if (this.state.platformCapability) {
+      return deviceInfo.deviceType !== 'default' && this.state.platformCapability?.mCameraCount > 1 &&
+        !this.isRecording
+    } else {
+      return false;
+    }
+  }
 }

product/phone/src/main/ets/pages/PreviewArea.ets

@@ -23,8 +23,7 @@ import { CameraNeedStatus, CameraStatus } from '@ohos/common/src/main/ets/defaul
 import { CameraId } from '@ohos/common/src/main/ets/default/setting/settingitem/CameraId';
 import { EventBus } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBus';
 import { EventBusManager } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBusManager';
-import { Dispatch, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
-import { getStore } from '@ohos/common/src/main/ets/default/redux/store';
+import { Dispatch, getStore, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
 import { Log } from '@ohos/common/src/main/ets/default/utils/Log';
 import { GeoLocation } from '@ohos/common/src/main/ets/default/featurecommon/geolocation/GeoLocation';
 import { SettingManager } from '@ohos/common/src/main/ets/default/setting/SettingManager';
@@ -76,8 +75,6 @@ class StateStruct {
 }
 
 class PreviewAreaDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -233,6 +230,8 @@ class PreviewAreaDispatcher {
   public swipeModeChangeDone(actionOff: boolean): void {
     this.mDispatch(Action.swipeModeChangeDone(actionOff));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 class SizeStruct {
@@ -254,7 +253,6 @@ class KeepScreenOnStruct {
 
 @Component
 export struct PreviewArea {
-  private TAG: string = '[PreviewArea]:';
   appEventBus: EventBus = EventBusManager.getInstance().getEventBus();
   @State state: StateStruct = new StateStruct();
   @State mAspectRatio: number = 3 / 4;
@@ -262,6 +260,7 @@ export struct PreviewArea {
   @State btnSwitchSec: boolean = false;
   @State isSwitchBackground: boolean = false;
   @State pageType: string = '';
+  private TAG: string = '[PreviewArea]:';
   private isShowPreview: boolean = false;
   private isForegroundInit: boolean = false;
   private settingManager = SettingManager.getInstance();
@@ -270,6 +269,251 @@ export struct PreviewArea {
   private modeArray: Array<string> = ['PHOTO', 'VIDEO'];
   private mAction: PreviewAreaDispatcher = new PreviewAreaDispatcher();
 
+  aboutToAppear(): void {
+    Log.info(`${this.TAG} PreviewArea aboutToAppear ${JSON.stringify(router.getParams())}`);
+    let routerParams = router.getParams();
+    if (routerParams && routerParams.pageType) {
+      this.pageType = routerParams.pageType.toString();
+    }
+
+    getStore().subscribe((state: OhCombinedState) => {
+      let isShowBlur: boolean = !state.contextReducer.uiEnable && state.contextReducer.uiStateMode == UiStateMode.NONE;
+      this.state = {
+        mode: state.modeReducer.mode,
+        curMode: state.modeReducer.curMode,
+        isShowPreview: state.previewReducer.isShowPreview,
+        surfaceId: state.previewReducer.surfaceId,
+        xComponentWidth: state.previewReducer.xComponentWidth,
+        xComponentHeight: state.previewReducer.xComponentHeight,
+        cameraPosition: state.cameraReducer.cameraPosition,
+        curCameraPosition: state.cameraReducer.curCameraPosition,
+        minZoomRatio: state.zoomReducer.minZoomRatio,
+        maxZoomRatio: state.zoomReducer.maxZoomRatio,
+        zoomRatio: state.zoomReducer.zoomRatio,
+        platformCapability: state.cameraInitReducer.platformCapability,
+        videoState: state.recordReducer.videoState,
+        isShowZoomText: state.zoomReducer.isShowZoomText,
+        showZoomLabelValue: state.zoomReducer.showZoomLabelValue,
+        footBarHeight: state.contextReducer.footBarHeight,
+        isShowFlashBlack: state.previewReducer.isShowFlashBlack,
+        isShowBigText: state.modeReducer.isShowBigText,
+        isShowtimeLapse: state.settingReducer.isShowtimeLapse,
+        isBigVideoTimerVisible: state.recordReducer.isBigVideoTimerVisible,
+        isSmallVideoTimerVisible: state.recordReducer.isSmallVideoTimerVisible,
+        isAssGridViewShow: state.settingReducer.isAssGridViewShow,
+        modeIndex: state.modeReducer.modeIndex,
+        isThirdPartyCall: state.contextReducer.isThirdPartyCall,
+        modeChangeDone: state.modeReducer.modeChangeDone,
+        isShowPageView: state.settingReducer.isShowSettingView,
+        showBlur: isShowBlur,
+        isFaCall: state.contextReducer.isFaCall,
+        rotateAngle: 0,
+        rotateAngleSec: 0,
+        switchBackgroundOpacity: 1,
+      };
+    }, (dispatch: Dispatch) => {
+      this.mAction.setDispatch(dispatch);
+    });
+    this.state.platformCapability;
+    this.appEventBus.on(Action.ACTION_INIT_DONE, (data: CameraInitStruct) => this.onCameraInit(data));
+    this.appEventBus.on(Action.ACTION_ON_MODE_CHANGED, (data: ModeStruct) => this.onModeChanged(data));
+    this.appEventBus.on(Action.ACTION_KEEP_SCREEN_ON, (data: KeepScreenOnStruct) => this.onKeepScreen(data));
+    this.appEventBus.on(Action.ACTION_RECORD_ERROR, () => this.onRecordError());
+    this.appEventBus.on(Action.ACTION_UPDATE_CAMERA_STATUS, () => this.updateCameraStatus());
+    GlobalContext.get().setObject('updateCameraStatus', () => {
+      Log.info(`${this.TAG} globalThis.updateCameraStatus called`);
+      this.updateCameraStatus();
+    });
+    this.calledByOther();
+    this.mAction.initCamera(this.state.curCameraPosition, this.state.mode);
+    this.mAction.initZoomRatio(1, 6); //TODO 需要动态取得实际变焦能力范围
+    Log.start(Log.X_COMPONENT_LIFE);
+  }
+
+  aboutToDisappear(): void {
+    Log.info(`${this.TAG} previewAreaLand aboutToDisappear called`);
+    this.appEventBus.off(Action.ACTION_INIT_DONE, (data: CameraInitStruct) => this.onCameraInit(data));
+    this.appEventBus.off(Action.ACTION_ON_MODE_CHANGED, (data: ModeStruct) => this.onModeChanged(data));
+    this.appEventBus.off(Action.ACTION_UPDATE_CAMERA_STATUS, () => this.updateCameraStatus());
+    GeoLocation.getInstance().off();
+    GlobalContext.get().setObject('cameraNeedStatus', CameraNeedStatus.CAMERA_NEED_RELEASE);
+    this.updateCameraStatus();
+  }
+
+  onBackPress(): void {
+    Log.info(`${this.TAG} previewAreaLand onBackPress called`);
+  }
+
+  onPageHide(): void {
+    this.mAction.startVideoFlag(false);
+  }
+
+  build() {
+    Column() {
+      if (this.state.isShowPreview) {
+        Stack() {
+          XComponent({
+            id: '',
+            type: 'surface',
+            libraryname: '',
+            controller: GlobalContext.get().getXComponentController()
+          })
+            .onLoad(() => {
+              Log.end(Log.X_COMPONENT_LIFE);
+              Log.info(`${this.TAG} XComponent_onLoad `);
+              let surfaceId: number = GlobalContext.get().getXComponentController().getXComponentSurfaceId();
+              this.mAction.prepareSurface(surfaceId);
+              this.doCameraAction();
+            })
+            .width(this.state.xComponentWidth)
+            .height(this.state.xComponentHeight)
+            .animation({
+              duration: 100,
+              curve: Curve.Sharp,
+              delay: 0,
+              iterations: 1,
+              playMode: PlayMode.Normal
+            })
+
+          if (this.isSwitchBackground) {
+            Column() {
+            }
+            .width(this.state.xComponentWidth)
+            .height(this.state.xComponentHeight)
+            .backgroundColor('#000')
+            .opacity(this.state.switchBackgroundOpacity)
+          }
+
+          if (this.state.showBlur) {
+            Column()
+              .width(this.state.xComponentWidth)
+              .height(this.state.xComponentHeight)
+              .backgroundColor(Color.Black)
+              .border({ width: { top: 0.5, bottom: 0.5 }, color: Color.Black })
+          }
+
+          if (this.btnSwitch) {
+            Image($r('app.media.whitePicture'))
+              .width(this.state.xComponentWidth)
+              .height(this.state.xComponentHeight)
+              .syncLoad(false)
+              .scale({ y: 1.0 })
+              .rotate({
+                x: 0,
+                y: 10,
+                z: 0,
+                angle: this.state.rotateAngle
+              })// .opacity(this.state.btnOpacity_first)
+              .onComplete(() => {
+              })
+          }
+
+          if (this.btnSwitchSec) {
+            Image($r('app.media.whitePicture'))
+              .width(this.state.xComponentWidth)
+              .height(this.state.xComponentHeight)
+              .syncLoad(false)
+              .scale({ y: 1.0 })
+              .rotate({
+                x: 0,
+                y: 10,
+                z: 0,
+                angle: this.state.rotateAngleSec
+              })// .opacity(this.state.btnOpacity_sec)
+              .onComplete(() => {
+              })
+          }
+
+          if (this.state.isShowFlashBlack) {
+            ShowFlashBlack();
+          }
+
+          if (this.state.isShowZoomText && deviceInfo.deviceType !== 'default' && !this.state.isShowtimeLapse) {
+            Stack({ alignContent: Alignment.Top }) {
+              ZoomText({ state: $state })
+            }
+            .width('100%')
+            .height('96%')
+          }
+
+          if (this.state.isShowBigText) {
+            Stack({ alignContent: Alignment.BottomStart }) {
+              BigText()
+            }
+            .width('100%')
+            .height('100%')
+            .padding({ bottom: '40vp' })
+          }
+
+          if (this.state.isAssGridViewShow === '1' && this.state.mode !== 'MORE') {
+            AssistiveGridView();
+          }
+
+          if (this.state.isSmallVideoTimerVisible) {
+            SmallVideoTimer();
+          }
+
+          if (this.state.isBigVideoTimerVisible) {
+            BigVideoTimer();
+          }
+
+          if (this.state.isShowtimeLapse) {
+            Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+              Column() {
+                TimeLapseView();
+              }.width('100%').height(150)
+            }
+          }
+        }
+        .width('100%')
+        .height('100%')
+      }
+    }
+    .height('100%')
+    .width(this.state.xComponentWidth)
+    .aspectRatio(this.mAspectRatio)
+    .margin({ top: 0 })
+    .backgroundColor('#000')
+    .gesture(
+      GestureGroup(
+        GestureMode.Exclusive,
+        TapGesture({ fingers: 1, count: 1 })
+          .onAction(() => this.onPreviewClicked()),
+        PinchGesture({ fingers: 2, distance: 1 })
+          .onActionStart((event) => {
+            if (event === undefined) {
+              return;
+            }
+            this.pinchGestureStart(event)
+          })
+          .onActionUpdate((event) => {
+            if (event === undefined) {
+              return;
+            }
+            this.pinchGestureUpdate(event)
+          })
+          .onActionEnd((event) => {
+            if (event === undefined) {
+              return;
+            }
+            this.pinchGestureEnd(event)
+          }),
+        PanGesture({ fingers: 1, direction: PanDirection.Left, distance: 10 })
+          .onActionEnd(() => {
+            if (!this.state.isThirdPartyCall && !GlobalContext.get().getCameraAbilityWant()?.parameters?.from) {
+              this.swipeChangeMode(1);
+            }
+          }),
+        PanGesture({ fingers: 1, direction: PanDirection.Right, distance: 10 })
+          .onActionEnd(() => {
+            if (!this.state.isThirdPartyCall && !GlobalContext.get().getCameraAbilityWant()?.parameters?.from) {
+              this.swipeChangeMode(-1);
+            }
+          })
+      )
+    )
+  }
+
   private async onCameraInit(data: CameraInitStruct): Promise<void> {
     Log.info(`${this.TAG} EventBus onCameraInit isShowPreview = ${this.isShowPreview} platformCapability = ${this.state.platformCapability} E`);
     if (this.isForegroundInit === true) {
@@ -351,77 +595,6 @@ export struct PreviewArea {
     Log.info(`${this.TAG} onRecordError invoke X`);
   }
 
-  aboutToAppear(): void {
-    Log.info(`${this.TAG} PreviewArea aboutToAppear ${JSON.stringify(router.getParams())}`);
-    let routerParams = router.getParams();
-    if (routerParams && routerParams.pageType) {
-      this.pageType = routerParams.pageType.toString();
-    }
-
-    getStore().subscribe((state: OhCombinedState) => {
-      let isShowBlur: boolean = !state.contextReducer.uiEnable && state.contextReducer.uiStateMode == UiStateMode.NONE;
-      this.state = {
-        mode: state.modeReducer.mode,
-        curMode: state.modeReducer.curMode,
-        isShowPreview: state.previewReducer.isShowPreview,
-        surfaceId: state.previewReducer.surfaceId,
-        xComponentWidth: state.previewReducer.xComponentWidth,
-        xComponentHeight: state.previewReducer.xComponentHeight,
-        cameraPosition: state.cameraReducer.cameraPosition,
-        curCameraPosition: state.cameraReducer.curCameraPosition,
-        minZoomRatio: state.zoomReducer.minZoomRatio,
-        maxZoomRatio: state.zoomReducer.maxZoomRatio,
-        zoomRatio: state.zoomReducer.zoomRatio,
-        platformCapability: state.cameraInitReducer.platformCapability,
-        videoState: state.recordReducer.videoState,
-        isShowZoomText: state.zoomReducer.isShowZoomText,
-        showZoomLabelValue: state.zoomReducer.showZoomLabelValue,
-        footBarHeight: state.contextReducer.footBarHeight,
-        isShowFlashBlack: state.previewReducer.isShowFlashBlack,
-        isShowBigText: state.modeReducer.isShowBigText,
-        isShowtimeLapse: state.settingReducer.isShowtimeLapse,
-        isBigVideoTimerVisible: state.recordReducer.isBigVideoTimerVisible,
-        isSmallVideoTimerVisible: state.recordReducer.isSmallVideoTimerVisible,
-        isAssGridViewShow: state.settingReducer.isAssGridViewShow,
-        modeIndex: state.modeReducer.modeIndex,
-        isThirdPartyCall: state.contextReducer.isThirdPartyCall,
-        modeChangeDone: state.modeReducer.modeChangeDone,
-        isShowPageView: state.settingReducer.isShowSettingView,
-        showBlur: isShowBlur,
-        isFaCall: state.contextReducer.isFaCall,
-        rotateAngle: 0,
-        rotateAngleSec: 0,
-        switchBackgroundOpacity: 1,
-      };
-    }, (dispatch: Dispatch) => {
-      this.mAction.setDispatch(dispatch);
-    });
-    this.state.platformCapability;
-    this.appEventBus.on(Action.ACTION_INIT_DONE, (data: CameraInitStruct) => this.onCameraInit(data));
-    this.appEventBus.on(Action.ACTION_ON_MODE_CHANGED, (data: ModeStruct) => this.onModeChanged(data));
-    this.appEventBus.on(Action.ACTION_KEEP_SCREEN_ON, (data: KeepScreenOnStruct) => this.onKeepScreen(data));
-    this.appEventBus.on(Action.ACTION_RECORD_ERROR, () => this.onRecordError());
-    this.appEventBus.on(Action.ACTION_UPDATE_CAMERA_STATUS, () => this.updateCameraStatus());
-    GlobalContext.get().setObject('updateCameraStatus', () => {
-      Log.info(`${this.TAG} globalThis.updateCameraStatus called`);
-      this.updateCameraStatus();
-    });
-    this.calledByOther();
-    this.mAction.initCamera(this.state.curCameraPosition, this.state.mode);
-    this.mAction.initZoomRatio(1, 6); //TODO 需要动态取得实际变焦能力范围
-    Log.start(Log.X_COMPONENT_LIFE);
-  }
-
-  aboutToDisappear(): void {
-    Log.info(`${this.TAG} previewAreaLand aboutToDisappear called`);
-    this.appEventBus.off(Action.ACTION_INIT_DONE, (data: CameraInitStruct) => this.onCameraInit(data));
-    this.appEventBus.off(Action.ACTION_ON_MODE_CHANGED, (data: ModeStruct) => this.onModeChanged(data));
-    this.appEventBus.off(Action.ACTION_UPDATE_CAMERA_STATUS, () => this.updateCameraStatus());
-    GeoLocation.getInstance().off();
-    GlobalContext.get().setObject('cameraNeedStatus', CameraNeedStatus.CAMERA_NEED_RELEASE);
-    this.updateCameraStatus();
-  }
-
   private releaseCamera(): void {
     Log.info(`${this.TAG} globalThis.releaseCamera called`);
     GlobalContext.get().setObject('cameraNeedStatus', CameraNeedStatus.CAMERA_NO_NEED_TO_DO);
@@ -499,7 +672,7 @@ export struct PreviewArea {
       case 'ALL':
         this.mAction.initMode(this.state.mode);
         this.mAction.updateModeIndex(this.state.modeIndex);
-      // private modeArray: Array<string> = ['PHOTO', 'VIDEO']; //, 'MORE'this.modeArray[modeIndex]
+        // private modeArray: Array<string> = ['PHOTO', 'VIDEO']; //, 'MORE'this.modeArray[modeIndex]
         break;
       default:
         Log.info(`${this.TAG} FA default`);
@@ -533,14 +706,6 @@ export struct PreviewArea {
       GlobalContext.get().getT<string>('cameraStatus') == CameraStatus.CAMERA_TAKE_VIDEO_FINISHED;
   }
 
-  onBackPress(): void {
-    Log.info(`${this.TAG} previewAreaLand onBackPress called`);
-  }
-
-  onPageHide(): void {
-    this.mAction.startVideoFlag(false);
-  }
-
   private pinchGestureStart(event: GestureEvent): void {
     Log.info(`${this.TAG} pinchGestureStart E`);
     if (this.state.mode != 'MULTI' && this.state.curCameraPosition !== 'FRONT') {
@@ -593,7 +758,8 @@ export struct PreviewArea {
 
   private swipeChangeMode(swipe: number): void {
     Log.info(`${this.TAG} swipeChangeMode E`);
-    if (!this.state.modeChangeDone && this.state.modeIndex + swipe >= 0 && this.state.modeIndex + swipe <= this.modeArray.length - 1 && !this.state.isShowtimeLapse) {
+    if (!this.state.modeChangeDone && this.state.modeIndex + swipe >= 0 &&
+      this.state.modeIndex + swipe <= this.modeArray.length - 1 && !this.state.isShowtimeLapse) {
       this.mAction.swipeChangeMode(this.state.modeIndex + swipe);
       this.mAction.swipeModeChangeDone(true);
     }
@@ -615,154 +781,4 @@ export struct PreviewArea {
     }
     Log.info(`${this.TAG} onKeepScreen X`);
   }
-
-  build() {
-    Column() {
-      if (this.state.isShowPreview) {
-        Stack() {
-          XComponent({
-            id: '',
-            type: 'surface',
-            libraryname: '',
-            controller: GlobalContext.get().getXComponentController()
-          })
-            .onLoad(() => {
-              Log.end(Log.X_COMPONENT_LIFE);
-              Log.info(`${this.TAG} XComponent_onLoad `);
-              let surfaceId: number = GlobalContext.get().getXComponentController().getXComponentSurfaceId();
-              this.mAction.prepareSurface(surfaceId);
-              this.doCameraAction();
-            })
-            .width(this.state.xComponentWidth)
-            .height(this.state.xComponentHeight)
-            .animation({
-              duration: 100,
-              curve: Curve.Sharp,
-              delay: 0,
-              iterations: 1,
-              playMode: PlayMode.Normal
-            })
-
-          if (this.isSwitchBackground) {
-            Column() {
-            }
-            .width(this.state.xComponentWidth)
-            .height(this.state.xComponentHeight)
-            .backgroundColor('#000')
-            .opacity(this.state.switchBackgroundOpacity)
-          }
-
-          if (this.state.showBlur) {
-            Column()
-              .width(this.state.xComponentWidth)
-              .height(this.state.xComponentHeight)
-              .backgroundColor(Color.Black)
-              .border({ width: { top: 0.5, bottom: 0.5 }, color: Color.Black })
-          }
-
-          if (this.btnSwitch) {
-            Image($r('app.media.whitePicture'))
-              .width(this.state.xComponentWidth)
-              .height(this.state.xComponentHeight)
-              .syncLoad(false)
-              .scale({ y: 1.0 })
-              .rotate({ x: 0, y: 10, z: 0, angle: this.state.rotateAngle })// .opacity(this.state.btnOpacity_first)
-              .onComplete(() => {
-              })
-          }
-
-          if (this.btnSwitchSec) {
-            Image($r('app.media.whitePicture'))
-              .width(this.state.xComponentWidth)
-              .height(this.state.xComponentHeight)
-              .syncLoad(false)
-              .scale({ y: 1.0 })
-              .rotate({ x: 0, y: 10, z: 0, angle: this.state.rotateAngleSec })// .opacity(this.state.btnOpacity_sec)
-              .onComplete(() => {
-              })
-          }
-
-          if (this.state.isShowFlashBlack) {
-            ShowFlashBlack();
-          }
-
-          if (this.state.isShowZoomText && deviceInfo.deviceType !== "default" && !this.state.isShowtimeLapse) {
-            Stack({ alignContent: Alignment.Top }) {
-              ZoomText({ state: $state })
-            }
-            .width('100%')
-            .height('96%')
-          }
-
-          if (this.state.isShowBigText) {
-            Stack({ alignContent: Alignment.BottomStart }) {
-              BigText()
-            }
-            .width('100%')
-            .height('100%')
-            .padding({ bottom: '40vp' })
-          }
-
-          if (this.state.isAssGridViewShow === '1' && this.state.mode !== 'MORE') {
-            AssistiveGridView();
-          }
-
-          if (this.state.isSmallVideoTimerVisible) {
-            SmallVideoTimer();
-          }
-
-          if (this.state.isBigVideoTimerVisible) {
-            BigVideoTimer();
-          }
-
-          if (this.state.isShowtimeLapse) {
-            Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-              Column() {
-                TimeLapseView();
-              }.width('100%').height(150)
-            }
-          }
-        }
-        .width('100%')
-        .height('100%')
-      }
-    }
-    .height('100%')
-    .width(this.state.xComponentWidth)
-    .aspectRatio(this.mAspectRatio)
-    .margin({ top: 0 })
-    .backgroundColor('#000')
-    .gesture(
-      GestureGroup(
-        GestureMode.Exclusive,
-        TapGesture({ fingers: 1, count: 1 })
-          .onAction(() => this.onPreviewClicked()),
-        PinchGesture({ fingers: 2, distance: 1 })
-          .onActionStart((event) => {
-            if (event === undefined) return;
-            this.pinchGestureStart(event)
-          })
-          .onActionUpdate((event) => {
-            if (event === undefined) return;
-            this.pinchGestureUpdate(event)
-          })
-          .onActionEnd((event) => {
-            if (event === undefined) return;
-            this.pinchGestureEnd(event)
-          }),
-        PanGesture({ fingers: 1, direction: PanDirection.Left, distance: 10 })
-          .onActionEnd(() => {
-            if (!this.state.isThirdPartyCall && !GlobalContext.get().getCameraAbilityWant()?.parameters?.from) {
-              this.swipeChangeMode(1);
-            }
-          }),
-        PanGesture({ fingers: 1, direction: PanDirection.Right, distance: 10 })
-          .onActionEnd(() => {
-            if (!this.state.isThirdPartyCall && !GlobalContext.get().getCameraAbilityWant()?.parameters?.from) {
-              this.swipeChangeMode(-1);
-            }
-          })
-      )
-    )
-  }
 }

product/phone/src/main/ets/pages/SettingView.ets

@@ -16,8 +16,7 @@
 import deviceInfo from '@ohos.deviceInfo';
 import { Action } from '@ohos/common/src/main/ets/default/redux/actions/Action';
 import { EventBusManager } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBusManager';
-import { Dispatch, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
-import { getStore } from '@ohos/common/src/main/ets/default/redux/store';
+import { Dispatch, getStore, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
 import { Log } from '@ohos/common/src/main/ets/default/utils/Log';
 import { SettingManager } from '@ohos/common/src/main/ets/default/setting/SettingManager';
 import { SettingItem } from '@ohos/common/src/main/ets/default/featurecommon/settingview/phone/SettingItem';
@@ -31,8 +30,6 @@ class StateStruct {
 }
 
 class SettingViewDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -56,6 +53,8 @@ class SettingViewDispatcher {
   public reStartPreview(zoomRatio: number): void {
     this.mDispatch(Action.reStartPreview(zoomRatio));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 class SizeStruct {
@@ -65,14 +64,14 @@ class SizeStruct {
 
 @Component
 export struct SettingView {
-  private TAG: string = '[SettingView]:'
-  private settingManager = SettingManager.getInstance()
   @State checkNameList: Array<string> = ['4:3', '[16:9] 720p']
   @State closeFlag: boolean = false
   @State tempGutter: number = 12; //列间距
   @State tempMargin: number = 12; //两侧间距
   @State settingsList: SettingGroupItem[] = new SettingListModel().getSettingList()
   @State state: StateStruct = new StateStruct()
+  private TAG: string = '[SettingView]:'
+  private settingManager = SettingManager.getInstance()
   private mEventBus = EventBusManager.getInstance().getEventBus()
   private WH_100_100: string = "100%";
   private mAction: SettingViewDispatcher = new SettingViewDispatcher();
@@ -111,24 +110,6 @@ export struct SettingView {
     return true;
   }
 
-  private aspectRatioChange(xComponentSize: SizeStruct): void {
-    if (this.state.mode != 'VIDEO') {
-      this.mAction.changeXComponentSize(xComponentSize.width, xComponentSize.height)
-      this.mAction.reStartPreview(this.state.zoomRatio)
-    }
-  }
-
-  private resolutionChange(xComponentSize: SizeStruct): void {
-    if (this.state.mode == 'VIDEO') {
-      this.mAction.changeXComponentSize(xComponentSize.width, xComponentSize.height)
-      this.mAction.reStartPreview(this.state.zoomRatio)
-    }
-  }
-
-  private assistiveGridChange(mAssistiveGrid: number): void {
-    this.mAction.assistiveGridView(mAssistiveGrid)
-  }
-
   build() {
     Flex({ direction: FlexDirection.Column }) {
       Row() {
@@ -194,4 +175,22 @@ export struct SettingView {
     .height(this.WH_100_100)
     .backgroundColor(Color.Black)
   }
+
+  private aspectRatioChange(xComponentSize: SizeStruct): void {
+    if (this.state.mode != 'VIDEO') {
+      this.mAction.changeXComponentSize(xComponentSize.width, xComponentSize.height)
+      this.mAction.reStartPreview(this.state.zoomRatio)
+    }
+  }
+
+  private resolutionChange(xComponentSize: SizeStruct): void {
+    if (this.state.mode == 'VIDEO') {
+      this.mAction.changeXComponentSize(xComponentSize.width, xComponentSize.height)
+      this.mAction.reStartPreview(this.state.zoomRatio)
+    }
+  }
+
+  private assistiveGridChange(mAssistiveGrid: number): void {
+    this.mAction.assistiveGridView(mAssistiveGrid)
+  }
 }

product/phone/src/main/ets/pages/SmallVideoTimer.ets

@@ -16,8 +16,7 @@
 import { Action } from '@ohos/common/src/main/ets/default/redux/actions/Action';
 import { EventBus } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBus';
 import { EventBusManager } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBusManager';
-import { Dispatch, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
-import { getStore } from '@ohos/common/src/main/ets/default/redux/store';
+import { Dispatch, getStore, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
 import { Log } from '@ohos/common/src/main/ets/default/utils/Log';
 import { GlobalContext } from '@ohos/common/src/main/ets/default/utils/GlobalContext';
 
@@ -30,8 +29,6 @@ class StateStruct {
 }
 
 class SmallVideoTimerDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -55,29 +52,19 @@ class SmallVideoTimerDispatcher {
     this.mDispatch(Action.updateSmallVideoTimerVisible(false))
     this.mDispatch(Action.updateScreenStatus(false))
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 @Component
 export struct SmallVideoTimer {
+  @State state: StateStruct = new StateStruct()
   private TAG: string = '[SmallVideoTimer]'
   private timer: number = 0
   private timerTick: number = 0
   private appEventBus: EventBus = EventBusManager.getInstance().getEventBus()
-  @State state: StateStruct = new StateStruct()
   private mAction: SmallVideoTimerDispatcher = new SmallVideoTimerDispatcher();
 
-  private async onRecordPaused(): Promise<void> {
-    Log.info(`${this.TAG} onRecordPaused timer id: ${this.timer} E`)
-    clearInterval(this.timer)
-    Log.info(`${this.TAG} onRecordPaused X`)
-  }
-
-  private async onRecordResumed(): Promise<void> {
-    Log.info(`${this.TAG} onRecordResumed E`)
-    this.setIntervalTimer()
-    Log.info(`${this.TAG} onRecordResumed timer id: ${this.timer} X`)
-  }
-
   aboutToAppear(): void {
     Log.info(`${this.TAG} aboutToAppear E`)
     getStore().subscribe((state: OhCombinedState) => {
@@ -105,43 +92,6 @@ export struct SmallVideoTimer {
     Log.info(`${this.TAG} aboutToDisappear X`)
   }
 
-  private setIntervalTimer(): void {
-    clearInterval(this.timer)
-    this.timer = setInterval(() => {
-      this.timerTick++
-      if (this.timerTick % 2 === 0) {
-        this.mAction.updateRecordingTime(this.state.recordingTime + 1)
-        let shownSec = '00'
-        let shownMin = '00'
-        let sec = this.state.recordingTime % 60
-        if (sec < 10) {
-          shownSec = `0${sec}`
-        } else {
-          shownSec = `${sec}`
-        }
-        let minute = Math.floor(this.state.recordingTime / 60)
-        if (minute < 10) {
-          shownMin = `0${minute}`
-        } else {
-          shownMin = `${minute}`
-        }
-        this.mAction.updateRecordingTimeDisplay(`${shownMin}:${shownSec}`)
-      }
-      this.mAction.updateSpotVisible(!this.state.isRecordingSpotVisible)
-      if (this.state.isThirdPartyCall && GlobalContext.get().getCameraAbilityWant().parameters?.videoDuration) {
-        try {
-          let videoDuration: number = Number.parseInt(GlobalContext.get().getCameraAbilityWant().parameters?.videoDuration as string)
-          Log.info(`${this.TAG} videoDuration is ${videoDuration}`);
-          if (this.state.recordingTime >= videoDuration) {
-            this.mAction.stopRecording();
-          }
-        } catch (error) {
-          Log.info(`${this.TAG} picker videoDuration --> ${JSON.stringify(error)}}`)
-        }
-      }
-    }, 500)
-  }
-
   build() {
     Column() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -182,4 +132,54 @@ export struct SmallVideoTimer {
       }
     }.width('100%').height(48).position({ x: 0, y: -48 })
   }
+
+  private async onRecordPaused(): Promise<void> {
+    Log.info(`${this.TAG} onRecordPaused timer id: ${this.timer} E`)
+    clearInterval(this.timer)
+    Log.info(`${this.TAG} onRecordPaused X`)
+  }
+
+  private async onRecordResumed(): Promise<void> {
+    Log.info(`${this.TAG} onRecordResumed E`)
+    this.setIntervalTimer()
+    Log.info(`${this.TAG} onRecordResumed timer id: ${this.timer} X`)
+  }
+
+  private setIntervalTimer(): void {
+    clearInterval(this.timer)
+    this.timer = setInterval(() => {
+      this.timerTick++
+      if (this.timerTick % 2 === 0) {
+        this.mAction.updateRecordingTime(this.state.recordingTime + 1)
+        let shownSec = '00'
+        let shownMin = '00'
+        let sec = this.state.recordingTime % 60
+        if (sec < 10) {
+          shownSec = `0${sec}`
+        } else {
+          shownSec = `${sec}`
+        }
+        let minute = Math.floor(this.state.recordingTime / 60)
+        if (minute < 10) {
+          shownMin = `0${minute}`
+        } else {
+          shownMin = `${minute}`
+        }
+        this.mAction.updateRecordingTimeDisplay(`${shownMin}:${shownSec}`)
+      }
+      this.mAction.updateSpotVisible(!this.state.isRecordingSpotVisible)
+      if (this.state.isThirdPartyCall && GlobalContext.get().getCameraAbilityWant().parameters?.videoDuration) {
+        try {
+          let videoDuration: number =
+            Number.parseInt(GlobalContext.get().getCameraAbilityWant().parameters?.videoDuration as string)
+          Log.info(`${this.TAG} videoDuration is ${videoDuration}`);
+          if (this.state.recordingTime >= videoDuration) {
+            this.mAction.stopRecording();
+          }
+        } catch (error) {
+          Log.info(`${this.TAG} picker videoDuration --> ${JSON.stringify(error)}}`)
+        }
+      }
+    }, 500)
+  }
 }

product/phone/src/main/ets/pages/ThirdPreviewView.ets

@@ -25,6 +25,9 @@ import { ComponentIdKeys } from '@ohos/common/src/main/ets/default/utils/Compone
 @Entry
 @Component
 struct ThirdPreviewView {
+  @State controls: boolean = false;
+  @State isShowVideoButton: boolean = true;
+  myVideoController: VideoController = new VideoController();
   private TAG: string = '[ThirdPreviewView]:';
   private photoWidth: string = '';
   private photoHeight: string = '';
@@ -32,9 +35,6 @@ struct ThirdPreviewView {
   private videoUri: string = '';
   private mode: string = '';
   private callBundleName: string = '';
-  @State controls: boolean = false;
-  @State isShowVideoButton: boolean = true;
-  myVideoController: VideoController = new VideoController();
 
   aboutToAppear() {
     Log.info(`${this.TAG} aboutToAppear E`);
@@ -75,7 +75,7 @@ struct ThirdPreviewView {
     Log.info(`${this.TAG} backCalledApp X`);
   }
 
-  terminateSelfWithResult(resourceUri: string, resultCode : number): void {
+  terminateSelfWithResult(resourceUri: string, resultCode: number): void {
     Log.info(`${this.TAG} terminateSelfWithResult start`);
     let abilityResult: ability.AbilityResult = {
       resultCode: resultCode,
@@ -107,18 +107,6 @@ struct ThirdPreviewView {
 
   }
 
-  private getVideoPlayIcon() {
-    if (vp2px(1) >= 1 && vp2px(1) < 2) {
-      return $r('app.media.ic_video_play_btn_hdpi');
-    } else if (vp2px(1) == 2) {
-      return $r('app.media.ic_video_play_btn_xhdpi');
-    } else if (vp2px(1) == 3) {
-      return $r('app.media.ic_video_play_btn_xxhdpi');
-    } else {
-      return $r('app.media.ic_video_play_btn_xxxhdpi');
-    }
-  }
-
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
       Stack() {
@@ -194,4 +182,16 @@ struct ThirdPreviewView {
       .position({ x: 0, y: 0 })
     }.width('100%').height('100%').backgroundColor('#000')
   }
+
+  private getVideoPlayIcon() {
+    if (vp2px(1) >= 1 && vp2px(1) < 2) {
+      return $r('app.media.ic_video_play_btn_hdpi');
+    } else if (vp2px(1) == 2) {
+      return $r('app.media.ic_video_play_btn_xhdpi');
+    } else if (vp2px(1) == 3) {
+      return $r('app.media.ic_video_play_btn_xxhdpi');
+    } else {
+      return $r('app.media.ic_video_play_btn_xxxhdpi');
+    }
+  }
 }

product/phone/src/main/ets/pages/index.ets

@@ -20,8 +20,7 @@ import { Action } from '@ohos/common/src/main/ets/default/redux/actions/Action';
 import { CameraWorker } from '@ohos/common/src/main/ets/default/worker/CameraWorker';
 import { EventBus } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBus';
 import { EventBusManager } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBusManager';
-import { Dispatch, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
-import { getStore } from '@ohos/common/src/main/ets/default/redux/store';
+import { Dispatch, getStore, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
 import { Log } from '@ohos/common/src/main/ets/default/utils/Log';
 import { MoreList } from '@ohos/common/src/main/ets/default/featurecommon/moreList/moreList';
 import {
@@ -62,8 +61,6 @@ class StateStruct {
 }
 
 class IndexDispatcher {
-  private mDispatch: Dispatch = (data) => data;
-
   public setDispatch(dispatch: Dispatch) {
     this.mDispatch = dispatch;
   }
@@ -116,6 +113,8 @@ class IndexDispatcher {
   public faCall(isFaCall: boolean): void {
     this.mDispatch(Action.faCall(isFaCall));
   }
+
+  private mDispatch: Dispatch = (data) => data;
 }
 
 const ZOOM_HEIGHT = 140;
@@ -179,24 +178,25 @@ struct Index {
       Log.info(`${this.TAG} permissions need to require from user: ${JSON.stringify(permissionList)}`);
       let atManager = abilityAccessCtrl.createAtManager();
       try {
-        atManager.requestPermissionsFromUser(GlobalContext.get().getCameraAbilityContext(), permissionList).then((data) => {
-          Log.info(`${this.TAG} data permissions: ${JSON.stringify(data.permissions)}`);
-          Log.info(`${this.TAG} data authResult: ${JSON.stringify(data.authResults)}`);
-          let sum = 0
-          for (let i = 0; i < data.authResults.length; i++) {
-            sum += data.authResults[i];
-          }
-          if (sum >= 0) {
-            GlobalContext.get().setObject('permissionFlag', true);
-            this.mAction.setPermissionFlag(true);
-          } else {
-            GlobalContext.get().setObject('permissionFlag', false);
-            this.mAction.setPermissionFlag(false);
-          }
-          Log.info(`${this.TAG} request permissions result: ${GlobalContext.get().getT<boolean>('permissionFlag')}`);
-        }, (err: BusinessError) => {
-          Log.error(`${this.TAG} Failed to start ability err code: ${err.code}`);
-        })
+        atManager.requestPermissionsFromUser(GlobalContext.get().getCameraAbilityContext(), permissionList)
+          .then((data) => {
+            Log.info(`${this.TAG} data permissions: ${JSON.stringify(data.permissions)}`);
+            Log.info(`${this.TAG} data authResult: ${JSON.stringify(data.authResults)}`);
+            let sum = 0
+            for (let i = 0; i < data.authResults.length; i++) {
+              sum += data.authResults[i];
+            }
+            if (sum >= 0) {
+              GlobalContext.get().setObject('permissionFlag', true);
+              this.mAction.setPermissionFlag(true);
+            } else {
+              GlobalContext.get().setObject('permissionFlag', false);
+              this.mAction.setPermissionFlag(false);
+            }
+            Log.info(`${this.TAG} request permissions result: ${GlobalContext.get().getT<boolean>('permissionFlag')}`);
+          }, (err: BusinessError) => {
+            Log.error(`${this.TAG} Failed to start ability err code: ${err.code}`);
+          })
       } catch (error) {
         Log.info(`${this.TAG} catch error: ${JSON.stringify(error)}`);
       }
@@ -223,10 +223,13 @@ struct Index {
   }
 
   onPageShow(): void {
-    Log.info(`${this.TAG} onPageShow this.permissionFlag: ${this.state.permissionFlag} permissionFlag: ${GlobalContext.get().getT<boolean>('permissionFlag')}`);
+    Log.info(`${this.TAG} onPageShow this.permissionFlag: ${this.state.permissionFlag} permissionFlag: ${GlobalContext.get()
+      .getT<boolean>('permissionFlag')}`);
     this.mAction.setPermissionFlag(GlobalContext.get().getT<boolean>('permissionFlag'));
     let curCameraId = AppStorage.Get<string>('storageCameraId');
-    if (curCameraId) this.mAction.initCameraPosition(curCameraId);
+    if (curCameraId) {
+      this.mAction.initCameraPosition(curCameraId);
+    }
     this.mAction.resetRecordingTime();
     Log.info(`${this.TAG} onPageShow X`);
   }
@@ -313,7 +316,8 @@ struct Index {
       }.width('100%').position({ y: 48 })
 
       Stack() {
-        if (deviceInfo.deviceType !== "default" && this.state.videoState === "beforeTakeVideo" && !this.state.isShowtimeLapse && this.state.showZoomLabelValue) {
+        if (deviceInfo.deviceType !== "default" && this.state.videoState === "beforeTakeVideo" &&
+          !this.state.isShowtimeLapse && this.state.showZoomLabelValue) {
           TabBar({ onBackClicked: () => this.onBackClicked() });
         }
       }.width('100%').height(48).position({ x: '0', y: '0' })
@@ -328,14 +332,16 @@ struct Index {
               Column() {
                 ZoomView()
               }
-              .visibility(!this.state.isShowtimeLapse && !this.state.isShowPinch ? Visibility.Visible : Visibility.Hidden)
+              .visibility(!this.state.isShowtimeLapse && !this.state.isShowPinch ? Visibility.Visible :
+              Visibility.Hidden)
             }
           }
           if (this.state.videoState === "beforeTakeVideo" && this.state.showZoomLabelValue) {
             Column() {
               Control()
             }
-            .visibility((!this.state.isShowtimeLapse && this.state.showZoomLabelValue) ? Visibility.Visible : Visibility.Hidden)
+            .visibility((!this.state.isShowtimeLapse && this.state.showZoomLabelValue) ? Visibility.Visible :
+            Visibility.Hidden)
             .width('100%')
             .offset({
               x: 156, y: 0
@@ -344,7 +350,8 @@ struct Index {
           Column() {
             FootBar()
           }
-          .visibility((!this.state.isShowtimeLapse && this.state.showZoomLabelValue) ? Visibility.Visible : Visibility.Hidden)
+          .visibility((!this.state.isShowtimeLapse && this.state.showZoomLabelValue) ? Visibility.Visible :
+          Visibility.Hidden)
         }
       }.width('100%').height(302 - ZOOM_HEIGHT).position({ y: this.state.footBarHeight + ZOOM_HEIGHT })
       .visibility(!this.state.isShowtimeLapse ? Visibility.Visible : Visibility.Hidden)

product/tablet/src/main/ets/pages/PreviewAreaLand.ets

@@ -15,25 +15,24 @@
 
 import router from '@system.router';
 import display from '@ohos.display';
-import deviceInfo from '@ohos.deviceInfo'
-import { BigVideoTimer } from './BigVideoTimer'
-import { Action, UiStateMode } from '@ohos/common/src/main/ets/default/redux/actions/Action'
-import { AssistiveGridView } from '@ohos/common/src/main/ets/default/featurecommon/assistivegridview/AssistiveGridView'
-import { BigText } from '@ohos/common/src/main/ets/default/featurecommon/bigtext/BigText'
-import { CameraNeedStatus, CameraStatus } from '@ohos/common/src/main/ets/default/utils/Constants'
-import { CameraId } from '@ohos/common/src/main/ets/default/setting/settingitem/CameraId'
-import { EventBus } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBus'
-import { EventBusManager } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBusManager'
-import { Dispatch, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store'
-import { getStore } from '@ohos/common/src/main/ets/default/redux/store'
-import { Log } from '@ohos/common/src/main/ets/default/utils/Log'
-import { GeoLocation } from '@ohos/common/src/main/ets/default/featurecommon/geolocation/GeoLocation'
-import { ScreenLockManager } from '@ohos/common/src/main/ets/default/featurecommon/screenlock/ScreenLockManager'
-import { SettingManager } from '@ohos/common/src/main/ets/default/setting/SettingManager'
-import { ShowFlashBlack } from '@ohos/common/src/main/ets/default/featurecommon/animate/ShowFlashBlack'
-import { TimeLapseView } from '@ohos/common/src/main/ets/default/featurecommon/timelapseview/TimeLapseView'
-import { ZoomText } from '@ohos/common/src/main/ets/default/featurecommon/zoomview/ZoomText'
-import { SmallVideoTimer } from './SmallVideoTimer'
+import deviceInfo from '@ohos.deviceInfo';
+import { BigVideoTimer } from './BigVideoTimer';
+import { Action, UiStateMode } from '@ohos/common/src/main/ets/default/redux/actions/Action';
+import { AssistiveGridView } from '@ohos/common/src/main/ets/default/featurecommon/assistivegridview/AssistiveGridView';
+import { BigText } from '@ohos/common/src/main/ets/default/featurecommon/bigtext/BigText';
+import { CameraNeedStatus, CameraStatus } from '@ohos/common/src/main/ets/default/utils/Constants';
+import { CameraId } from '@ohos/common/src/main/ets/default/setting/settingitem/CameraId';
+import { EventBus } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBus';
+import { EventBusManager } from '@ohos/common/src/main/ets/default/worker/eventbus/EventBusManager';
+import { Dispatch, getStore, OhCombinedState } from '@ohos/common/src/main/ets/default/redux/store';
+import { Log } from '@ohos/common/src/main/ets/default/utils/Log';
+import { GeoLocation } from '@ohos/common/src/main/ets/default/featurecommon/geolocation/GeoLocation';
+import { ScreenLockManager } from '@ohos/common/src/main/ets/default/featurecommon/screenlock/ScreenLockManager';
+import { SettingManager } from '@ohos/common/src/main/ets/default/setting/SettingManager';
+import { ShowFlashBlack } from '@ohos/common/src/main/ets/default/featurecommon/animate/ShowFlashBlack';
+import { TimeLapseView } from '@ohos/common/src/main/ets/default/featurecommon/timelapseview/TimeLapseView';
+import { ZoomText } from '@ohos/common/src/main/ets/default/featurecommon/zoomview/ZoomText';
+import { SmallVideoTimer } from './SmallVideoTimer';
 import promptAction from '@ohos.promptAction';
 import wantConstant from '@ohos.ability.wantConstant';
 import { GlobalContext } from '@ohos/common/src/main/ets/default/utils/GlobalContext';
@@ -547,7 +546,8 @@ export struct PreviewAreaLand {
 
   private switchAnimationSec(): void {
     Log.info(`${this.TAG} switchAnimationSec called`);
-    animateTo({ duration: 200,
+    animateTo({
+      duration: 200,
       delay: 0,
       curve: Curve.Sharp,
     }, () => {
@@ -580,7 +580,8 @@ export struct PreviewAreaLand {
   }
 
   private switchBackgroundAnimation(): void {
-    animateTo({ duration: 350,
+    animateTo({
+      duration: 350,
       delay: 0,
       curve: Curve.Sharp,
       onFinish: () => {
@@ -653,7 +654,8 @@ export struct PreviewAreaLand {
 
   private swipeChangeMode(swipe: number): void {
     Log.info(`${this.TAG} swipeChangeMode E`);
-    if (!this.state.modeChangeDone && this.state.modeIndex + swipe >= 0 && this.state.modeIndex + swipe <= this.modeArray.length - 1 && !this.state.isShowtimeLapse) {
+    if (!this.state.modeChangeDone && this.state.modeIndex + swipe >= 0 &&
+      this.state.modeIndex + swipe <= this.modeArray.length - 1 && !this.state.isShowtimeLapse) {
       this.mAction.swipeChangeMode(this.state.modeIndex + swipe);
       this.mAction.swipeModeChangeDone(true);
     }
@@ -744,7 +746,12 @@ export struct PreviewAreaLand {
               .height(this.state.xComponentHeight)
               .syncLoad(false)
               .scale({ x: this.scaleX, y: 1.0 })
-              .rotate({ x: 0, y: 10, z: 0, angle: this.rotateAngle })// .opacity(this.state.btnOpacity_first)
+              .rotate({
+                x: 0,
+                y: 10,
+                z: 0,
+                angle: this.rotateAngle
+              })// .opacity(this.state.btnOpacity_first)
               .onComplete(() => {
               })
           }
@@ -755,7 +762,12 @@ export struct PreviewAreaLand {
               .height(this.state.xComponentHeight)
               .syncLoad(false)
               .scale({ x: this.scaleX, y: 1.0 })
-              .rotate({ x: 0, y: 10, z: 0, angle: this.rotateAngleSec })// .opacity(this.state.btnOpacity_sec)
+              .rotate({
+                x: 0,
+                y: 10,
+                z: 0,
+                angle: this.rotateAngleSec
+              })// .opacity(this.state.btnOpacity_sec)
               .onComplete(() => {
               })
           }
@@ -764,7 +776,7 @@ export struct PreviewAreaLand {
             ShowFlashBlack();
           }
 
-          if (this.state.isShowZoomText && deviceInfo.deviceType !== "default" && !this.state.isShowtimeLapse) {
+          if (this.state.isShowZoomText && deviceInfo.deviceType !== 'default' && !this.state.isShowtimeLapse) {
             Stack({ alignContent: Alignment.Top }) {
               Column() {
                 Column() {