refactor(example-app): improve configurability for pages

TakePicture, EditURIPhoto, and RecordVideo - following previous commit

Author: OS-pedrogustavobilro

example-app/src/components/camera/EditURIPhotoConfigurable.tsx

@@ -9,17 +9,12 @@ import {
   IonToggle,
 } from "@ionic/react";
 import React from "react";
-import { Camera, MediaResult } from "@capacitor/camera";
+import { Camera, MediaResult, EditURIPhotoOptions } from "@capacitor/camera";
 import { Filesystem, Directory } from "@capacitor/filesystem";
 import { Capacitor } from "@capacitor/core";
 import { TestImage } from "./TestImageData";
 import { MediaHistoryService } from "../../services/MediaHistoryService";
 
-interface EditURIPhotoConfig {
-  saveToGallery: boolean;
-  includeMetadata: boolean;
-}
-
 interface EditURIPhotoConfigurableProps {
   selectedImage: TestImage | null;
 }
@@ -28,7 +23,7 @@ interface EditURIPhotoConfigurableState {
   savedFileUri: string | null;
   savedFileWebPath: string | null;
   editedPhoto: MediaResult | null;
-  config: EditURIPhotoConfig;
+  config: Omit<EditURIPhotoOptions, 'uri'>; // Config excludes 'uri' since it comes from saved file
   isLoading: boolean;
 }
 
@@ -38,6 +33,7 @@ class EditURIPhotoConfigurable extends React.Component<
 > {
   constructor(props: EditURIPhotoConfigurableProps) {
     super(props);
+    // Initialize with API defaults from EditURIPhotoOptions
     this.state = {
       savedFileUri: null,
       savedFileWebPath: null,
@@ -60,7 +56,7 @@ class EditURIPhotoConfigurable extends React.Component<
     }
   }
 
-  updateConfig = (field: keyof EditURIPhotoConfig, value: boolean): void => {
+  updateConfig = (field: keyof Omit<EditURIPhotoOptions, 'uri'>, value: boolean): void => {
     this.setState({
       config: { ...this.state.config, [field]: value },
     });

example-app/src/components/camera/RecordVideoConfigurable.tsx

@@ -7,21 +7,15 @@ import {
   IonToggle,
 } from "@ionic/react";
 import React from "react";
-import { Camera, MediaResult } from "@capacitor/camera";
-
-interface RecordVideoConfig {
-  saveToGallery: boolean;
-  includeMetadata: boolean;
-  isPersistent: boolean;
-}
+import { Camera, MediaResult, RecordVideoOptions } from "@capacitor/camera";
 
 interface RecordVideoConfigurableProps {
   buttonLabel?: string;
   onVideoResult: (result: MediaResult) => void;
 }
 
 interface RecordVideoConfigurableState {
-  config: RecordVideoConfig;
+  config: RecordVideoOptions;
 }
 
 class RecordVideoConfigurable extends React.Component<
@@ -30,16 +24,17 @@ class RecordVideoConfigurable extends React.Component<
 > {
   constructor(props: RecordVideoConfigurableProps) {
     super(props);
+    // Initialize with API defaults from RecordVideoOptions
     this.state = {
       config: {
         saveToGallery: false,
-        includeMetadata: true,
+        includeMetadata: false,
         isPersistent: true,
       },
     };
   }
 
-  updateConfig = (field: keyof RecordVideoConfig, value: any): void => {
+  updateConfig = (field: keyof RecordVideoOptions, value: any): void => {
     this.setState({
       config: { ...this.state.config, [field]: value },
     });
@@ -58,12 +53,7 @@ class RecordVideoConfigurable extends React.Component<
 
   executeWithConfig = async (): Promise<void> => {
     try {
-      const config = this.state.config;
-      const result = await Camera.recordVideo({
-        saveToGallery: config.saveToGallery,
-        includeMetadata: config.includeMetadata,
-        isPersistent: config.isPersistent,
-      });
+      const result = await Camera.recordVideo(this.state.config);
       this.props.onVideoResult(result);
     } catch (e) {
       const error = e as any;

example-app/src/components/camera/TakePictureConfigurable.tsx

@@ -18,28 +18,13 @@ import {
   CameraDirection,
 } from "@capacitor/camera";
 
-interface TakePictureConfig {
-  quality: number;
-  allowEdit: boolean;
-  encodingType: EncodingType;
-  saveToGallery: boolean;
-  width: number | undefined;
-  height: number | undefined;
-  correctOrientation: boolean;
-  cameraDirection: CameraDirection;
-  presentationStyle: 'fullscreen' | 'popover';
-  editInApp: boolean;
-  includeMetadata: boolean;
-  webUseInput: boolean;
-}
-
 interface TakePictureConfigurableProps {
   buttonLabel?: string;
   onPhotoResult: (result: MediaResult) => void;
 }
 
 interface TakePictureConfigurableState {
-  config: TakePictureConfig;
+  config: TakePhotoOptions;
 }
 
 class TakePictureConfigurable extends React.Component<
@@ -48,25 +33,23 @@ class TakePictureConfigurable extends React.Component<
 > {
   constructor(props: TakePictureConfigurableProps) {
     super(props);
+    // Initialize with API defaults from TakePhotoOptions
     this.state = {
       config: {
         quality: 100,
         allowEdit: false,
         encodingType: EncodingType.JPEG,
         saveToGallery: false,
-        width: undefined,
-        height: undefined,
         correctOrientation: true,
         cameraDirection: CameraDirection.Rear,
         presentationStyle: 'fullscreen',
         editInApp: true,
         includeMetadata: false,
-        webUseInput: false,
       },
     };
   }
 
-  updateConfig = (field: keyof TakePictureConfig, value: any): void => {
+  updateConfig = (field: keyof TakePhotoOptions, value: any): void => {
     this.setState({
       config: { ...this.state.config, [field]: value },
     });
@@ -86,22 +69,7 @@ class TakePictureConfigurable extends React.Component<
 
   executeWithConfig = async (): Promise<void> => {
     try {
-      const config = this.state.config;
-      const options: TakePhotoOptions = {
-        quality: config.quality,
-        allowEdit: config.allowEdit,
-        encodingType: config.encodingType,
-        saveToGallery: config.saveToGallery,
-        width: config.width,
-        height: config.height,
-        correctOrientation: config.correctOrientation,
-        cameraDirection: config.cameraDirection,
-        presentationStyle: config.presentationStyle,
-        editInApp: config.editInApp,
-        includeMetadata: config.includeMetadata,
-        webUseInput: config.webUseInput,
-      };
-      const result = await Camera.takePhoto(options);
+      const result = await Camera.takePhoto(this.state.config);
       this.props.onPhotoResult(result);
     } catch (e) {
       const error = e as any;