Fix for android and new UI

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/pwa-elements",
-  "version": "3.0.0",
+  "version": "3.0.1-1",
   "description": "Stencil Component Starter",
   "main": "dist/index.js",
   "unpkg": "dist/ionicpwaelements/ionicpwaelements.js",

src/components.d.ts

@@ -20,7 +20,7 @@ export namespace Components {
   interface PwaCamera {
     'facingMode': string;
     'handleNoDeviceError': (e?: any) => void;
-    'handlePhoto': (e: any) => void;
+    'handlePhoto': (photo: Blob) => void;
     'noDevicesButtonText': string;
     'noDevicesText': string;
   }
@@ -89,7 +89,7 @@ declare namespace LocalJSX {
   interface PwaCamera {
     'facingMode'?: string;
     'handleNoDeviceError'?: (e?: any) => void;
-    'handlePhoto'?: (e: any) => void;
+    'handlePhoto'?: (photo: Blob) => void;
     'noDevicesButtonText'?: string;
     'noDevicesText'?: string;
   }

src/components/camera-modal/camera-modal-instance.css

@@ -24,6 +24,7 @@
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
   width: var(--inset-width);
   height: var(--inset-height);
+  max-height: 100%;
 }
 
 @media only screen and (max-width: 600px) {

src/components/camera-modal/camera-modal-instance.tsx

@@ -10,9 +10,9 @@ export class PWACameraModal {
   @Event() onPhoto: EventEmitter;
   @Event() noDeviceError: EventEmitter;
   @Prop() noDevicesText = 'No camera found';
-  @Prop() noDevicesButtonText = 'Choose file';
+  @Prop() noDevicesButtonText = 'Choose image';
 
-  handlePhoto = async (photo: any) => {
+  handlePhoto = async (photo: Blob) => {
     this.onPhoto.emit(photo);
   }
 

src/components/camera/camera.css

@@ -1,6 +1,8 @@
 :host {
   --header-height: 4em;
   --footer-height: 9em;
+  --header-height-landscape: 3em;
+  --footer-height-landscape: 6em;
   --shutter-size: 6em;
   --icon-size-header: 1.5em;
   --icon-size-footer: 2.5em;
@@ -64,6 +66,18 @@
   padding: var(--margin-size-footer);
 }
 
+@media (max-height: 375px) {
+  .camera-header {
+    --header-height: var(--header-height-landscape);
+  }
+  .camera-footer {
+    --footer-height: var(--footer-height-landscape);
+  }
+  .camera-footer .shutter {
+    --shutter-size: 4em;
+  }
+}
+
 .camera-video {
   position: relative;
   flex: 1;
@@ -80,6 +94,28 @@ video {
   background-color: black;
 }
 
+.pick-image {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  left: var(--margin-size-footer);
+  top: 0;
+  height: 100%;
+  width: var(--icon-size-footer);
+  color: white;
+}
+
+.pick-image input {
+  visibility: hidden;
+}
+
+.pick-image svg {
+  cursor: pointer;
+  fill: white;
+  width: var(--icon-size-footer);
+  height: var(--icon-size-footer);
+}
+
 .shutter {
   position: absolute;
   left: 50%;
@@ -115,6 +151,7 @@ video {
   width: var(--icon-size-footer);
   color: white;
 }
+
 .rotate img {
   width: var(--icon-size-footer);
   height: var(--icon-size-footer);
@@ -164,11 +201,13 @@ video {
 .accept {
   background-color: black;
   flex: 1;
+  overflow: hidden;
 }
 
 .accept .accept-image {
   width: 100%;
   height: 100%;
+  max-height: 100%;
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;