From 43b3ab8e3949565da25331c4842da60197002dab Mon Sep 17 00:00:00 2001
From: LeonardoPineda <leo135pineda@gmail.com>
Date: Thu, 21 Oct 2021 15:13:38 -0400
Subject: [PATCH 1/4] fix camera rear

---
 src/components.d.ts                                   | 9 +++++++--
 src/components/camera-modal/camera-modal-instance.tsx | 3 +++
 src/components/camera-modal/camera-modal.tsx          | 7 ++++++-
 src/components/camera/camera.tsx                      | 4 ++--
 src/definitions.ts                                    | 2 ++
 src/index.html                                        | 1 +
 6 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index 1f8462f..4e0123d 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -9,6 +9,7 @@
 import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
 import {
   ActionSheetOption,
+  FacingMode,
 } from './definitions';
 
 export namespace Components {
@@ -18,7 +19,7 @@ export namespace Components {
     'options': ActionSheetOption[];
   }
   interface PwaCamera {
-    'facingMode': string;
+    'facingMode': FacingMode;
     'handleNoDeviceError': (e?: any) => void;
     'handlePhoto': (photo: Blob) => void;
     'noDevicesButtonText': string;
@@ -26,9 +27,11 @@ export namespace Components {
   }
   interface PwaCameraModal {
     'dismiss': () => Promise<void>;
+    'facingMode': FacingMode;
     'present': () => Promise<void>;
   }
   interface PwaCameraModalInstance {
+    'facingMode': FacingMode;
     'noDevicesButtonText': string;
     'noDevicesText': string;
   }
@@ -87,17 +90,19 @@ declare namespace LocalJSX {
     'options'?: ActionSheetOption[];
   }
   interface PwaCamera {
-    'facingMode'?: string;
+    'facingMode'?: FacingMode;
     'handleNoDeviceError'?: (e?: any) => void;
     'handlePhoto'?: (photo: Blob) => void;
     'noDevicesButtonText'?: string;
     'noDevicesText'?: string;
   }
   interface PwaCameraModal {
+    'facingMode'?: FacingMode;
     'onNoDeviceError'?: (event: CustomEvent<any>) => void;
     'onOnPhoto'?: (event: CustomEvent<any>) => void;
   }
   interface PwaCameraModalInstance {
+    'facingMode'?: FacingMode;
     'noDevicesButtonText'?: string;
     'noDevicesText'?: string;
     'onNoDeviceError'?: (event: CustomEvent<any>) => void;
diff --git a/src/components/camera-modal/camera-modal-instance.tsx b/src/components/camera-modal/camera-modal-instance.tsx
index d1b399c..20be1bc 100644
--- a/src/components/camera-modal/camera-modal-instance.tsx
+++ b/src/components/camera-modal/camera-modal-instance.tsx
@@ -1,4 +1,5 @@
 import { h, Event, EventEmitter, Component, Listen, Element, Prop } from '@stencil/core';
+import { FacingMode } from '../../definitions';
 
 @Component({
   tag: 'pwa-camera-modal-instance',
@@ -11,6 +12,7 @@ export class PWACameraModal {
   @Event() noDeviceError: EventEmitter;
   @Prop() noDevicesText = 'No camera found';
   @Prop() noDevicesButtonText = 'Choose image';
+  @Prop() facingMode: FacingMode = 'user';
 
   handlePhoto = async (photo: Blob) => {
     this.onPhoto.emit(photo);
@@ -43,6 +45,7 @@ export class PWACameraModal {
         <div class="content">
           <pwa-camera
             onClick={e => this.handleComponentClick(e)}
+            facingMode={this.facingMode}
             handlePhoto={this.handlePhoto}
             handleNoDeviceError={this.handleNoDeviceError}
             noDevicesButtonText={this.noDevicesButtonText}
diff --git a/src/components/camera-modal/camera-modal.tsx b/src/components/camera-modal/camera-modal.tsx
index 80986e9..4bfa1a7 100644
--- a/src/components/camera-modal/camera-modal.tsx
+++ b/src/components/camera-modal/camera-modal.tsx
@@ -1,4 +1,5 @@
-import { h, Event, EventEmitter, Component, Method } from '@stencil/core';
+import { h, Event, EventEmitter, Component, Method, Prop } from '@stencil/core';
+import { FacingMode } from '../../definitions';
 
 @Component({
   tag: 'pwa-camera-modal',
@@ -6,6 +7,9 @@ import { h, Event, EventEmitter, Component, Method } from '@stencil/core';
   shadow: true
 })
 export class PWACameraModal {
+
+  @Prop() facingMode: FacingMode = 'user';
+  
   @Event() onPhoto: EventEmitter;
   @Event() noDeviceError: EventEmitter;
 
@@ -14,6 +18,7 @@ export class PWACameraModal {
   @Method()
   async present() {
     const camera = document.createElement('pwa-camera-modal-instance');
+    camera.facingMode = this.facingMode;
 
     camera.addEventListener('onPhoto', async (e: any) => {
       if (!this._modal) {
diff --git a/src/components/camera/camera.tsx b/src/components/camera/camera.tsx
index 3c2f656..57d88e4 100644
--- a/src/components/camera/camera.tsx
+++ b/src/components/camera/camera.tsx
@@ -1,6 +1,6 @@
 import { h, Component, Element, Prop, State } from '@stencil/core';
 
-import { FlashMode } from '../../definitions';
+import { FacingMode, FlashMode } from '../../definitions';
 
 import './imagecapture';
 
@@ -17,7 +17,7 @@ export class CameraPWA {
 
   @Prop({ context: 'isServer' }) private isServer: boolean;
 
-  @Prop() facingMode: string = 'user';
+  @Prop() facingMode: FacingMode = 'user';
 
   @Prop() handlePhoto: (photo: Blob) => void;
   @Prop() handleNoDeviceError: (e?: any) => void;
diff --git a/src/definitions.ts b/src/definitions.ts
index 9e666e4..d17498b 100644
--- a/src/definitions.ts
+++ b/src/definitions.ts
@@ -11,6 +11,8 @@ export interface PhotoCapabilities {
   fillLightMode: string[];
 }
 
+export type FacingMode = 'user' | 'environment';
+
 export type FlashMode = "auto" | "off" | "flash";
 
 export interface ActionSheetOption {
diff --git a/src/index.html b/src/index.html
index 6a0f5b6..59cf169 100644
--- a/src/index.html
+++ b/src/index.html
@@ -29,6 +29,7 @@
     var b = document.querySelector('#camera-button');
     b.addEventListener('click', async (ev) => {
       const camera = document.createElement('pwa-camera-modal');
+      camera.facingMode = 'environment';
 
       document.body.appendChild(camera);
 

From 8a0fc307344e288b9887129c0d3d43d866b59c12 Mon Sep 17 00:00:00 2001
From: LeonardoPineda <leo135pineda@gmail.com>
Date: Thu, 21 Oct 2021 17:18:08 -0400
Subject: [PATCH 2/4] fix https://github.com/ionic-team/pwa-elements/issues/74

---
 src/components/camera/camera.tsx | 48 +++++++++++---------------------
 1 file changed, 17 insertions(+), 31 deletions(-)

diff --git a/src/components/camera/camera.tsx b/src/components/camera/camera.tsx
index 57d88e4..0b41788 100644
--- a/src/components/camera/camera.tsx
+++ b/src/components/camera/camera.tsx
@@ -243,35 +243,22 @@ export class CameraPWA {
     });
   }
 
-  rotate() {
-    this.stopStream();
-
-    const track = this.stream && this.stream.getTracks()[0];
-    if (!track) {
-      return;
-    }
-
-    let c = track.getConstraints();
-    let facingMode = c.facingMode;
-
-    if (!facingMode) {
-      let c = track.getCapabilities();
-      facingMode = c.facingMode[0];
+  getFacingMode(stream) {
+    const track = stream && stream.getTracks()[0];
+    if (track) {
+      let c = track.getConstraints() || track.getCapabilities() || {facingMode: []};
+      return Array.isArray(c.facingMode) ? c.facingMode[0] : c.facingMode;
     }
+    return;
+  }
 
-    if (facingMode === 'environment') {
-      this.initCamera({
-        video: {
-          facingMode: 'user'
-        }
-      });
-    } else {
-      this.initCamera({
-        video: {
-          facingMode: 'environment'
-        }
-      });
-    }
+  rotate() {
+    this.stopStream();
+    this.initCamera({
+      video: {
+        facingMode: this.getFacingMode(this.stream) === 'user' ? 'environment' : 'user'  
+      }
+    });
   }
 
   setFlashMode(mode: FlashMode) {
@@ -317,14 +304,13 @@ export class CameraPWA {
   }
 
   handleCancelPhoto = (_e: Event) => {
-    const track = this.stream && this.stream.getTracks()[0];
-    let c = track && track.getConstraints();
+    const facingMode = this.getFacingMode(this.stream);
     this.photo = null;
 
-    if (c) {
+    if (facingMode) {
       this.initCamera({
         video: {
-          facingMode: c.facingMode
+          facingMode
         }
       });
     } else {

From 227bc608b18359d8fb1c00aeadad94c8ea0f64ae Mon Sep 17 00:00:00 2001
From: LeonardoPineda <leo135pineda@gmail.com>
Date: Fri, 22 Oct 2021 14:19:25 -0400
Subject: [PATCH 3/4] fix camera rear

---
 src/components/camera/camera.css |   2 +
 src/components/camera/camera.tsx | 157 ++++++++++++++++---------------
 2 files changed, 85 insertions(+), 74 deletions(-)

diff --git a/src/components/camera/camera.css b/src/components/camera/camera.css
index b328579..abcf441 100644
--- a/src/components/camera/camera.css
+++ b/src/components/camera/camera.css
@@ -92,6 +92,8 @@ video {
   min-height: 100%;
   object-fit: cover;
   background-color: black;
+  -webkit-transform: initial;
+  transform: initial;
 }
 
 .pick-image {
diff --git a/src/components/camera/camera.tsx b/src/components/camera/camera.tsx
index 0b41788..e0d9924 100644
--- a/src/components/camera/camera.tsx
+++ b/src/components/camera/camera.tsx
@@ -13,6 +13,8 @@ declare var window: any;
   shadow: true
 })
 export class CameraPWA {
+  protected isRotate: boolean;
+
   @Element() el;
 
   @Prop({ context: 'isServer' }) private isServer: boolean;
@@ -94,7 +96,7 @@ export class CameraPWA {
 
       this.hasCamera = !!videoDevices.length;
       this.hasMultipleCameras = videoDevices.length > 1;
-    } catch(e) {
+    } catch (e) {
       this.deviceError = e;
     }
   }
@@ -110,9 +112,8 @@ export class CameraPWA {
         audio: false,
         ...constraints
       });
-
       this.initStream(stream);
-    } catch(e) {
+    } catch (e) {
       this.deviceError = e;
       this.handleNoDeviceError && this.handleNoDeviceError(e);
     }
@@ -129,7 +130,7 @@ export class CameraPWA {
       this.deviceError = 'No image capture';
       this.handleNoDeviceError && this.handleNoDeviceError();
     }
-
+    this.isRotate = false;
     // Always re-render
     this.el.forceUpdate();
   }
@@ -155,12 +156,13 @@ export class CameraPWA {
   }
 
   async capture() {
+    this.photo = null;
     if (this.hasImageCapture()) {
       try {
         const photo = await this.imageCapture.takePhoto({
           fillLightMode: this.flashModes.length > 1 ? this.flashMode : undefined
         });
-        
+
         await this.flashScreen();
 
         this.promptAccept(photo);
@@ -200,7 +202,7 @@ export class CameraPWA {
           break;
       }
     }
-    
+
     this.photoSrc = URL.createObjectURL(photo);
   }
 
@@ -246,19 +248,27 @@ export class CameraPWA {
   getFacingMode(stream) {
     const track = stream && stream.getTracks()[0];
     if (track) {
-      let c = track.getConstraints() || track.getCapabilities() || {facingMode: []};
+      let c = track.getConstraints() || track.getCapabilities() || { facingMode: [] };
       return Array.isArray(c.facingMode) ? c.facingMode[0] : c.facingMode;
     }
     return;
   }
 
   rotate() {
-    this.stopStream();
-    this.initCamera({
-      video: {
-        facingMode: this.getFacingMode(this.stream) === 'user' ? 'environment' : 'user'  
-      }
-    });
+    if (this.isRotate) {
+      return;
+    }
+    if (this.hasMultipleCameras) {
+      this.isRotate = true;
+      this.stopStream();
+      this.initCamera({
+        video: {
+          facingMode: this.getFacingMode(this.stream) === 'user' ? 'environment' : 'user'
+        }
+      });
+    } else {
+      console.warn('not has multiples cameras');
+    }
   }
 
   setFlashMode(mode: FlashMode) {
@@ -287,7 +297,6 @@ export class CameraPWA {
   }
 
   handleShutterClick = (_e: Event) => {
-    console.log()
     this.capture();
   }
 
@@ -346,7 +355,7 @@ export class CameraPWA {
 
   iconPhotos() {
     return (
-      <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><title>ionicons-v5-e</title><path d='M450.29,112H142c-34,0-62,27.51-62,61.33V418.67C80,452.49,108,480,142,480H450c34,0,62-26.18,62-60V173.33C512,139.51,484.32,112,450.29,112Zm-77.15,61.34a46,46,0,1,1-46.28,46A46.19,46.19,0,0,1,373.14,173.33Zm-231.55,276c-17,0-29.86-13.75-29.86-30.66V353.85l90.46-80.79a46.54,46.54,0,0,1,63.44,1.83L328.27,337l-113,112.33ZM480,418.67a30.67,30.67,0,0,1-30.71,30.66H259L376.08,333a46.24,46.24,0,0,1,59.44-.16L480,370.59Z'/><path d='M384,32H64A64,64,0,0,0,0,96V352a64.11,64.11,0,0,0,48,62V152a72,72,0,0,1,72-72H446A64.11,64.11,0,0,0,384,32Z'/></svg>
+      <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><title>ionicons-v5-e</title><path d='M450.29,112H142c-34,0-62,27.51-62,61.33V418.67C80,452.49,108,480,142,480H450c34,0,62-26.18,62-60V173.33C512,139.51,484.32,112,450.29,112Zm-77.15,61.34a46,46,0,1,1-46.28,46A46.19,46.19,0,0,1,373.14,173.33Zm-231.55,276c-17,0-29.86-13.75-29.86-30.66V353.85l90.46-80.79a46.54,46.54,0,0,1,63.44,1.83L328.27,337l-113,112.33ZM480,418.67a30.67,30.67,0,0,1-30.71,30.66H259L376.08,333a46.24,46.24,0,0,1,59.44-.16L480,370.59Z' /><path d='M384,32H64A64,64,0,0,0,0,96V352a64.11,64.11,0,0,0,48,62V152a72,72,0,0,1,72-72H446A64.11,64.11,0,0,0,384,32Z' /></svg>
     );
   }
 
@@ -388,11 +397,11 @@ export class CameraPWA {
             </div>
             <div class="item flash" onClick={e => this.handleFlashClick(e)}>
               {this.flashModes.length > 0 && (
-              <div>
-                {this.flashMode == 'off' ? <img src={this.iconFlashOff()} /> : ''}
-                {this.flashMode == 'auto' ? <img src={this.iconFlashAuto()} /> : ''}
-                {this.flashMode == 'flash' ? <img src={this.iconFlashOn()} /> : ''}
-              </div>
+                <div>
+                  {this.flashMode == 'off' ? <img src={this.iconFlashOff()} /> : ''}
+                  {this.flashMode == 'auto' ? <img src={this.iconFlashAuto()} /> : ''}
+                  {this.flashMode == 'flash' ? <img src={this.iconFlashOn()} /> : ''}
+                </div>
               )}
             </div>
           </section>
@@ -415,64 +424,64 @@ export class CameraPWA {
         )}
         {/* Show the taken photo for the Accept UI*/}
         {this.photo ? (
-        <div class="accept">
-          <div
-            class="accept-image"
-            style={{
-              backgroundImage: `url(${this.photoSrc})`,
-              ...acceptStyles
-            }} />
-        </div>
+          <div class="accept">
+            <div
+              class="accept-image"
+              style={{
+                backgroundImage: `url(${this.photoSrc})`,
+                ...acceptStyles
+              }} />
+          </div>
         ) : (
-          <div class="camera-video">
-            {this.showShutterOverlay && (
-            <div class="shutter-overlay">
+            <div class="camera-video">
+              {this.showShutterOverlay && (
+                <div class="shutter-overlay">
+                </div>
+              )}
+              {this.hasImageCapture() ? (
+                <video
+                  ref={(el: HTMLVideoElement) => this.videoElement = el}
+                  onLoadedMetaData={this.handleVideoMetadata}
+                  autoplay
+                  playsinline />
+              ) : (
+                  <canvas ref={(el: HTMLCanvasElement) => this.canvasElement = el} width="100%" height="100%"></canvas>
+                )}
+              <canvas class="offscreen-image-render" ref={e => this.offscreenCanvas = e} width="100%" height="100%" />
             </div>
-            )}
-            {this.hasImageCapture() ? (
-            <video
-              ref={(el: HTMLVideoElement) => this.videoElement = el}
-              onLoadedMetaData={this.handleVideoMetadata}
-              autoplay
-              playsinline />
-            ) : (
-            <canvas ref={(el: HTMLCanvasElement) => this.canvasElement = el} width="100%" height="100%"></canvas>
-            )}
-            <canvas class="offscreen-image-render" ref={e => this.offscreenCanvas = e} width="100%" height="100%" />
-          </div>
-        )}
+          )}
 
         {this.hasCamera && (
-        <div class="camera-footer">
-          {!this.photo ? ([
-          <div class="pick-image" onClick={this.handlePickFile}>
-            <label htmlFor="_pwa-elements-file-pick">
-              {this.iconPhotos()}
-            </label>
-            <input
-              type="file"
-              id="_pwa-elements-file-pick"
-              onChange={this.handleFileInputChange}
-              accept="image/*"
-              class="pick-image-button" />
-          </div>,
-          <div class="shutter" onClick={this.handleShutterClick}>
-            <div class="shutter-button"></div>
-          </div>,
-          <div class="rotate" onClick={this.handleRotateClick}>
-            <img src={this.iconReverseCamera()} />
-          </div>,
-          ]) : (
-          <section class="items">
-            <div class="item accept-cancel" onClick={e => this.handleCancelPhoto(e)}>
-              <img src={this.iconRetake()} />
-            </div>
-            <div class="item accept-use" onClick={e => this.handleAcceptPhoto(e)}>
-              <img src={this.iconConfirm()} />
-            </div>
-          </section>
-          )}
-        </div>
+          <div class="camera-footer">
+            {!this.photo ? ([
+              <div class="pick-image" onClick={this.handlePickFile}>
+                <label htmlFor="_pwa-elements-file-pick">
+                  {this.iconPhotos()}
+                </label>
+                <input
+                  type="file"
+                  id="_pwa-elements-file-pick"
+                  onChange={this.handleFileInputChange}
+                  accept="image/*"
+                  class="pick-image-button" />
+              </div>,
+              <div class="shutter" onClick={this.handleShutterClick}>
+                <div class="shutter-button"></div>
+              </div>,
+              this.hasMultipleCameras ? <div class="rotate" onClick={this.handleRotateClick}>
+                <img src={this.iconReverseCamera()} />
+              </div> : '',
+            ]) : (
+                <section class="items">
+                  <div class="item accept-cancel" onClick={e => this.handleCancelPhoto(e)}>
+                    <img src={this.iconRetake()} />
+                  </div>
+                  <div class="item accept-use" onClick={e => this.handleAcceptPhoto(e)}>
+                    <img src={this.iconConfirm()} />
+                  </div>
+                </section>
+              )}
+          </div>
         )}
       </div>
     );

From 43d48837111f9306acd50a75761e701bce13bdfc Mon Sep 17 00:00:00 2001
From: LeonardoPineda <leo135pineda@gmail.com>
Date: Tue, 17 May 2022 19:11:02 -0400
Subject: [PATCH 4/4] fix promise resolve

---
 src/components/camera/camera.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/camera/camera.tsx b/src/components/camera/camera.tsx
index f6370cf..93c6593 100644
--- a/src/components/camera/camera.tsx
+++ b/src/components/camera/camera.tsx
@@ -291,7 +291,7 @@ export class CameraPWA {
       this.showShutterOverlay = true;
       setTimeout(() => {
         this.showShutterOverlay = false;
-        resolve();
+        resolve(true);
       }, 100);
     });
   }