ionic-team / pwa-elements Goto Github PK

Quality UI experiences for Web APIs that require custom UI (such as media/camera).

Home Page: https://medium.com/@maxlynch/building-the-progressive-web-app-os-57daebcb69c1

License: MIT License

CSS 17.19% TypeScript 76.10% HTML 6.72%

pwa-elements's Introduction

Ionic Elements for Progressive Web Apps

This project is a growing collection of pre-built UI experiences for Web APIs such as camera/video, focused on building Progressive Web Apps that meet and exceed native mobile app experiences.

These elements are a key part of our mission to build the Progressive Web App OS by providing awesome UIs on top of low-level Web APIs.

These components are built as Web Components that can be used in any web app, using the power of Stencil JS.

Currently Supported

Currently, the project offers a quality in-app Camera experience using getUserMedia, with support for multiple cameras and with automatic handling of image data.

See the provided example for an example of how to use these components.

Capacitor Usage

Ionic PWA Elements were built primarily for developers using Capacitor, our Native app container that allows web apps to run on nearly every platform with consistent APIs.

Ionic PWA Elements offer web-UI experiences for Capacitor apps running in a browser as PWA, such that the API is identical for the PWA and the native app store app.

See the Capacitor PWA Elements page for more information on using this library in your Capacitor apps.

pwa-elements's People

Contributors

Stargazers

Watchers

Forkers

jcesarmobile kimosabi77 ljieyao edgeworkscreative corysmc yankedev scrpgil ashd32 peterennis eastjie xar nbamj whoisryosuke doc22940 turystahobby hdntecnologiabr faithfulojebiyi mikeapr4 jankal13 pfeigl caio-silva-threeo tagshelfsrl jaymemi ayushroy64 glennvdw jorgempy jeremykenedy mariahendrikx rpavez leo1305pineda cirsolar-cloud imfms jsilva6 theriskus winardouff cli1005 daniel-verdugo fetrarij rbejaranoe alexescalante borjalive laine-hallot paul040696 andreilita ekoeryanto francescomosca

pwa-elements's Issues

build for production

Current version is not build in production mode, so Capacitor apps on devices (specially emulators) with a webview/chrome older than 67 it shows this screen instead of the user app

Return error when getUserMedia is not available

Return error when getUserMedia is not available instead of showing the camera UI with no camera feed (black image), so it’s easier to know that it’s not working and why.

ionic-team/capacitor#1215

version 1.4.0 broken?

Hi!

I am using @ionic/pwa-elements inside an angular application.

This is the code to define custom elements inside muy app (as documented here):

import { defineCustomElements } from '@ionic/pwa-elements/loader';

defineCustomElements(window);

Every was working as expected with version 1.3.0... but I just accidentally update and build is broken:

WARNING in ./src/main.ts 12:0-20
"export 'defineCustomElements' was not found in '@ionic/pwa-elements/loader'

ERROR in -/node_modules/@ionic/pwa-elements/loader/index.es2017.mjs
Module not found: Error: Can't resolve '../dist/esm/loader.mjs' in '-/node_modules/@ionic/pwa-elements/loader'
ERROR in -/node_modules/@ionic/pwa-elements/loader/index.es2017.mjs
Module not found: Error: Can't resolve '../dist/esm/polyfills/index.js' in '-/node_modules/@ionic/pwa-elements/loader'
ERROR in chunk vendor [initial]
vendor.49badd78888d593567e4.js
-/node_modules/@ionic/pwa-elements/loader/index.es2017.mjs
Cannot read property 'isProvided' of null

I have downloaded, built and linked from a local folder version 1.4.0, and everything works as expected... so I would say it is a problem with the package uploaded to npm.

I have found some folders are missing inside v1.4.0:

From my local build inside ./dist/:

 $ tree -L 1
.
├── cjs
├── collection
├── esm
├── esm-es5
├── index.js
├── index.mjs
├── ionicpwaelements
├── ionicpwaelements.js
└── types

Inside npm downloaded v1.4.0 ./dist/ folder:

$ tree  -L 1
.
├── collection
├── ionicpwaelements
├── ionicpwaelements.js
└── types

Or maybe I am missing something else...
Thanks in advance

No Ionic/Angular Support or Documentation

I'm submitting a ... (check one with "x")
[ X ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:
There is no documentation or support for integrating with Ionic4/Angular. The documentation on Stencil's Website references functions (defineCustomElements) that seem to be removed from the 1.1.0 release of pwa-elements.

https://stenciljs.com/docs/angular

There seems to be no clear path to integrating this with your core products of Ionic/Angular and Capacitor. I have no problem modifying and/or importing different things into my app but this is more like shooting in the dark.

Expected behavior:
I would expect there to be at least a short guide of how to integrate this with Ionic/Angular.

Steps to reproduce:
Try and use pwa-elements with Ionic/Angular and Capacitor.

Show loading during image capture

Resources:
Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

 insert the output from npm list @stencil/core here

I'm submitting a ... (check one with "x")
[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:

It takes about 2 seconds until the photo is really taken. Clicking the capture button and viewing the actual photo. It even looks like not the first frame is capture but the last so I need to freeze while it does whatever it does during capture process. A loading or label "Please stay still for a few seconds" would be way better for the user experience.

Expected behavior:

Steps to reproduce:

Related code:

insert any relevant code here

Other information:

Camera breaks on modal close on web

Resources:
Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

[email protected] /Users/guypeer/Desktop/projects/ventures/tabs
└── (empty)

I'm submitting a ... (check one with "x")
[x] bug report

Current behavior:
Currently on the web (chrome), when opening the camera modal and closing, the application breaks.

Expected behavior:
Expect the code not to break :) just close the modal and the device camera.

Steps to reproduce:

Related code:

insert any relevant code here
  const takePhoto = async () => {
    const cameraPhoto = await Camera.getPhoto({
      resultType: CameraResultType.Uri,
      source: CameraSource.Camera,
      quality: 100,
    }); 
    const fileName = `${new Date().getTime()}.jpeg`;
    const savedFileImage = await savePicture(cameraPhoto, fileName);
    const newPhotos = [savedFileImage, ...photos];
    setPhotos(newPhotos);
    Storage.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
  };

camera - after pressing on take picture button it takes 1-2s to output the image

Resources:
Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

`-- @ionic/[email protected]
  `-- @ionic/[email protected]
    +-- @stencil/[email protected]
    `-- [email protected]
      `-- @stencil/[email protected]

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:
running the ionic live example or code example from ionic camera docs, in both examples it takes 1-2s for the camera component to shoot and output an image.
it feels unresponsive.

Expected behavior:
an instant (as much as possible) image output like native camera.

Steps to reproduce:
take a photo using camera component

Related code:

code implementation:

takePhoto(): Observable<Photo> {
  const getPhotoOptions: ImageOptions = {
     resultType: CameraResultType.Base64,
     source: CameraSource.Camera,
     quality: 100
  };
  const photo: Promise<Photo> = Camera.getPhoto(getPhotoOptions);
  return from(photo);
}

note: changing CameraResultType from Base64 to Uri did not help.

Other information:

verified on several android phones.

logs:

2022-03-18 18:09:09.161 24579-24579/io.ionic.starter D/Capacitor: App resumed
2022-03-18 18:09:09.162 24579-24579/io.ionic.starter I/Choreographer: Skipped 43 frames!  The application may be doing too much work on its main thread.
2022-03-18 18:09:09.183 24579-24663/io.ionic.starter I/OpenGLRenderer: Davey! duration=743ms; Flags=1, IntendedVsync=134835931172300, Vsync=134836647838938, OldestInputEvent=9223372036854775807, NewestInputEvent=0, HandleInputStart=134836655903978, AnimationStart=134836655992207, PerformTraversalsStart=134836655993249, DrawStart=134836663121947, SyncQueued=134836664429499, SyncStart=134836664593822, IssueDrawCommandsStart=134836664655697, SwapBuffers=134836674244603, FrameCompleted=134836675017884, DequeueBufferDuration=7583000, QueueBufferDuration=548000, 
2022-03-18 18:09:09.183 24579-24579/io.ionic.starter W/Looper: Slow Looper main: doFrame is 723ms late because of 1 msg, msg 1 took 732ms (seq=861 running=687ms runnable=4ms late=15ms h=android.app.ActivityThread$H w=159)
2022-03-18 18:09:09.190 24579-25274/io.ionic.starter V/Capacitor/Plugin: To native (Capacitor plugin): callbackId: 114069787, pluginId: Filesystem, methodName: readFile
2022-03-18 18:09:09.190 24579-25274/io.ionic.starter V/Capacitor: callback: 114069787, pluginId: Filesystem, methodName: readFile, methodData: {"path":"file:\/\/\/storage\/emulated\/0\/Android\/data\/io.ionic.starter\/files\/Pictures\/JPEG_20220318_170904_8848633993521663605.jpg"}
2022-03-18 18:09:09.512 24579-24598/io.ionic.starter I/o.ionic.starte: Background young concurrent copying GC freed 1(31KB) AllocSpace objects, 1(7240KB) LOS objects, 0% free, 90MB/90MB, paused 6.591ms total 48.595ms
2022-03-18 18:09:09.816 24579-25274/io.ionic.starter V/Capacitor/Plugin: To native (Capacitor plugin): callbackId: 114069788, pluginId: Filesystem, methodName: writeFile
2022-03-18 18:09:10.024 24579-25274/io.ionic.starter V/Capacitor: callback: 114069788, pluginId: Filesystem, methodName: writeFile, methodData: {"path":"1647616149633.jpeg","data":"\/9j\/4QOdRXhpZgAATU0AKgAAAAgACwEbAAUAAAABAAAAkgEaAAUAAAABAAAAmgEAAAMAAAABD8AAAAEQAAIAAAAFAAAAogEBAAMAAAABCNwAAAEPAAIAAAAHAAAApwITAAMAAAABAAEAAIdpAAQAAAABAAAAwgESAAMAAAABAAEAAAEoAAMAAAABAAIAAAEyAAIAAAAUAAAArgAAAAAAAABIAAAAAQAAAEgAAAABTUkgOABYaWFvbWkAMjAyMjowMzoxOCAxNzowOTowNwAAH5ICAAUAAAABAAACPJAAAAIAAAAFAAACRKMBAAIAAAACPwAAAJIEAAoAAAABAAACSYgiAAMAAAABAAIAAKABAAMAAAABAAEAAJIFAAUAAAABAAACUaADAAMAAAABCNwAAJIDAAoAAAABAAACWZADAAIAAAAUAAACYaAAAAIAAAAFAAACdZKRAAIAAAAHAAACeqQDAAMAAAABAAAAAKAFAAQAAAABAAACw6QCAAMAAAABAAAAAIKaAAUAAAABAAACgZIJAAMAAAABABAAAJKQAAIAAAAHAAACiYKdAAUAAAABAAACkKACAAMAAAABD8AAAJEBAAIAAAAEPz8\/AIgnAAMAAAABAc0AAKQFAAMAAAABABUAAJKSAAIAAAAHAAACmJAEAAIAAAAUAAACn5IBAAoAAAABAAACs5IKAAUAAAABAAACu5IHAAMAAAABAAIAAKQGAAMAAAABAAAAAJIIAAMAAAABAAAAAKIXAAMAAAABAAEAAAAAAAAAAACpAAAAZDAyMjAAAAAAAAAAAAYAAACpAAAAZP\/\/\/yoAAABkMjAyMjowMzoxOCAxNzowOTowNwAwMTAwADI3NDQzNgAAAAEvAAAnEDI3NDQzNgAAAEZQAAAnEDI3NDQzNgAyMDIyOjAzOjE4IDE3OjA5OjA3AAAAE8IAAAPoAAAQeAAAA+gAAQABAAIAAAAEUjk4AAAAAAAACgEbAAUAAAABAAADUwEaAAUAAAABAAADWwEAAAMAAAABD8AAAAEQAAIAAAAFAAADYwEBAAMAAAABCNwAAAEPAAIAAAAHAAADaAITAAMAAAABAAEAAAESAAMAAAABAAEAAAEoAAMAAAABAAIAAAEyAAIAAAAUAAADbwAAAAAAAABIAAAAAQAAAEgAAAABTUkgOABYaWFvbWkAMjAyMjowMzoxOCAxNzowOTowNwAAAQA3AAMAAAABAAEAAAAAAAD\/4AAQSkZJRgABAQAAAQABAAD\/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAIQAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv\/bAEMAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf\/bAEMBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf\/AABEID8AI3AMBIgACEQEDEQH\/xAAfAAACAgIDAQEBAAAAAAAAAAADBAIFAQYABwgJCgv\/xABKEAADAAIBAwMDBAAGAQIBARkBAgMEERIFEyEABiIHFDEIIzJBCRUkM0JRYRZDUhdxgSU0YhhTkXKCoSZEY7FzChk10VTBNpLh\/8QAHgEAAgMBAQEBAQEAAAAAAAAAAAIBAwQFBgcICQr\/xABUEQABAgQDBAgFAwQBAwICABcBAhEAAyExBBJBBVFhcQYTIoGRobHwBzLB0eEUQvEIFSNSYhYzciSCF0OSoiVTY7LCGDRzNVREg5PS4vI2RSajs\/\/aAAwDAQACEQMRAD8A83rSdGoqVagSmRFWGPMU5zVMoYsaNRFJBINnZwHpvyeIBy10xzyvWMzjrKi83ZNsUZVU83CVqk3mAiT\/AJFDIFtk1FvuXK40MmoSgS65OKUx8ya2RldYcOJi70jjzLHuftNVipC8GVBrXGa\/Ola4150lfLmnN55LqHI4pPuWxTL5OWQAlg2iAo+3lILPpH53jZnst8Z40nHbcslZNXGP3HF8hD3sdQi3HHG7intivxnwYADa87C80yQFfv8ADHD\/ABCCi8fuEWTFS8aFhOzEFwT2wx5+tbA6iMlsiZVIqEDNPISmnh85FMWsXVaTdyEcUKrzfUB5b0\/S+WOSvfEq2NNViV5mbpxTghUMs0s1GXvGQ50EdAbUAAAFoItZzjOwoYLkVgcvIx0mHnTViyqBU7MS7UZaMXKjZrof2KuG1+nmL4KXnl80ycbvtgQnj9tp5IpURafYV+84C7eiOCpGzyqTfOWjdrtYyYoAnVJl8o0dHhWc1o47ep\/ssloPxDOdry84SeSQr1RBY4zLTufs3saDktJyXSnb+RRmCFdcEPy9TBG3qKU7lFTI1JEW13bjMnJnxSqbHOqO3xapXxshtBx6UqMblrLCDIrZYJiwxxaN17GPSZkywPZUPMzGqFgk0YabjuktXMLOrLW6S0EiSsZD4gIpZ24USC7mXJUeCSv49GOfnwjioJ4U0Z5KlMaNMiFoSQsuS4WvbWnCilslkKOeLICtqeiCLZVRYKsyrzZgzE\/tVxuFlDJXmGmZKJSKtzXejwBUADLMlMZxZJuuV9uWo4BFWS7OzZDqKaSm52Vu0VCu\/wCd+qZsvLmQjYlu1sSnS4VGYsxmqCDUhXgrEEV4PyVeRVmYkSXIyT96FxeRjQrJG5YkLTaEmZkqFsePN6x5MzcjMgFdkAgjYltWQZ3WmQUMZIIlHp9wwtz7aoZNSSuQvxQ8yXVh+NrU0okq3MKyK2Wd6weDcJ92WKWKo0ZvxIVQy0ZOPEsWKlJqvzuYTprstHF7XDxFIUYmCs6v3KByV4abmFbgeWgp91UJxEixCQVis2+SzJkoWm2LusOPJWxlbZ2Xb+iEWWDb3i7gdvmvNf8AVKULRmlpvONLT12RTnNlp90tZ\/MUC8in8yqsdt0Jw4pwm5he\/DICmr8nkuHNXVqLR5KrKzEEKZjb8u1TW\/u8gG6Va+6ZKw50DJXIU8VDCgKu44iaLQfwZFBUbHpf7zInTGZsO16zobToFesp5DKWlzZl5NNuPbagRyqMFXTurBkpzPVm4RVG4TnBp15pT7kon2afdPj2k0hUZSrZFUMKKaPKLTOuRcLrbAlGQpTIes1Q1njLTttZEUH7gyXU6cCzv3SzllmWn8tqOOojqff0Vw8yFZWTOc
2022-03-18 18:09:10.099 24579-24906/io.ionic.starter D/Capacitor/FilesystemPlugin: File '/data/user/0/io.ionic.starter/files/1647616149633.jpeg' saved!
2022-03-18 18:09:10.102 24579-25274/io.ionic.starter V/Capacitor/Plugin: To native (Capacitor plugin): callbackId: 114069789, pluginId: Storage, methodName: set
2022-03-18 18:09:10.102 24579-25274/io.ionic.starter V/Capacitor: callback: 114069789, pluginId: Storage, methodName: set, methodData: {"key":"photos","value":"[{\"filepath\":\"file:\/\/\/data\/user\/0\/io.ionic.starter\/files\/1647616149633.jpeg\",\"webviewPath\":\"http:\/\/192.168.50.244:8100\/_capacitor_file_\/data\/user\/0\/io.ionic.starter\/files\/1647616149633.jpeg\"},{\"filepath\":\"file:\/\/\/data\/user\/0\/io.ionic.starter\/files\/1647616077452.jpeg\",\"webviewPath\":\"http:\/\/192.168.50.244:8100\/_capacitor_file_\/data\/user\/0\/io.ionic.starter\/files\/1647616077452.jpeg\"},{\"filepath\":\"file:\/\/\/data\/user\/0\/io.ionic.starter\/files\/1647616044460.jpeg\",\"webviewPath\":\"http:\/\/192.168.50.244:8100\/_capacitor_file_\/data\/user\/0\/io.ionic.starter\/files\/1647616044460.jpeg\"},{\"filepath\":\"file:\/\/\/data\/user\/0\/io.ionic.starter\/files\/1647615596623.jpeg\",\"webviewPath\":\"http:\/\/192.168.50.244:8100\/_capacitor_file_\/data\/user\/0\/io.ionic.starter\/files\/1647615596623.jpeg\"},{\"filepath\":\"file:\/\/\/data\/user\/0\/io.ionic.starter\/files\/1647615521650.jpeg\",\"webviewPath\":\"http:\/\/192.168.50.244:8100\/_capacitor_file_\/data\/user\/0\/io.ionic.starter\/files\/1647615521650.jpeg\"}]"}
2022-03-18 18:09:10.104 24579-24579/io.ionic.starter I/Capacitor/Console: File: http://192.168.50.244:8100/ - Line 204 - Msg: undefined

feat: Possibility to translate in the camera plugin when it does not exist.

Hello, when there is no camera, the texts: "No camera found" and "Choose image" appear. Add the possibility to change the texts as in the rest of promptLabel.

Thanks!

doc: README out of sync

Is the README correct for this project?

I arrived to read about the web camera controls API and components. A quick review suggests that the readme might be a template from generating new Stencil components?

Types clash when using along with @ionic/[email protected] (again 🙄)

@mlynch this is getting quite frustrating to work with... every time an Ionic interface changes, the @ionic/pwa-elements package is blocking us from updating ionic/core in our project.

[ ERROR ]  TypeScript: node_modules/@ionic/pwa-elements/node_modules/@ionic/core/dist/types/components.d.ts:5176:4
           Subsequent property declarations must have the same type. Property ''ion-checkbox'' must be of type
           'IonCheckboxAttributes', but here has type 'IonCheckboxAttributes'.

   L5175:  'ion-card': Components.IonCardAttributes;
   L5176:  'ion-checkbox': Components.IonCheckboxAttributes;
   L5177:  'ion-chip': Components.IonChipAttributes;

etc.

I can confirm that updating @ionic/core to 4.1.1 within @ionic/pwa-elements fixes the issue.

I was thinking "just make "@ionic/core": "^4.0.0" a peer dependency", but then I saw that the camera-modal component imports the Modal interface... so I guess it's not that simple.

I tried as a work-around to just use the script tag method, i. e. add a copy task to my stencil config and a script tag to index.html, however that doesn't work either, throws at runtime:

ionic config was already initialized
    setupConfig | @ | app.core.js:6

app.core.js:146 Uncaught TypeError: Cannot redefine property: queue
    at Function.defineProperty (<anonymous>)
    at app.core.js:146

TL;DR we need this package to be kept up to date.

markdownlint warnings in readme

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

0.13.2

Current behavior:

markdownlint warnings

Expected behavior:

Fix them but ignore the one with the badge

Steps to reproduce:

Related code:

Other information:

Question: is that possible to force the use of PWA elements on Android Capacitor App ?

Problem

The native Camera API make hybrid apps crash on many Android devices
cf

Need

Using WebRTC image capture is more stable on Android devices, so is there a way to force use of PWA elements on Android environment ?

ionic-pwa-elements (still) does not smoothly integrate with Ionic4, capacitor and angular

Resources:

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

`-- @ionic/[email protected]
  `-- @stencil/[email protected]

I'm submitting a ... (check one with "x")
[x] bug report

Current behavior:

Getting pwa-elements working in an out-of-the-box ionic4/angular/capacitor application today is very difficult and buggy.

If you follow the documented installation instructions (https://capacitor.ionicframework.com/docs/getting-started/pwa-elements/), the first suggestion of including a script in your applications index file means that the app won't work offline.

The second suggestion of using an import (some where) just breaks an ionic4/angular app, it won't build.

Using an involved work around:

https://stackoverflow.com/questions/54589782/how-to-include-ionic-pwa-elements-in-an-ionic4-angular-build

I can get it to run and now the capacitor camera works inside my PWA, but other Ionic elements are broken e.g. modals.

If I try patching Ionic and capacitor to the latest versions at this stage, ionic/angular from 4.0.2 to 4.1.1 and capacitor to beta.18, pwa-elements just breaks again.

ERROR in ./node_modules/@ionic/pwa-elements/dist/esm/es5/ionicpwaelements.core.js 5:2171
Module parse failed: Unexpected token (5:2171)
You may need an appropriate loader to handle this file type.
|  * Built with http://stenciljs.com
|  */
> function n(n,t){return"sc-"+n.t+(t&&t!==c?"-"+t:"")}function t(n,t){return n+(t?"-h":"-s")}function e(n,t){for <cut for brevity>

Expected behavior:

Ionic4 with angular and capacitor should just work 'out of the box'. There needs to be clear instructions on how to include pwa-elements in angular, or integrate it tidily into the '@ionic/angular' package itself so there's no extra step.

Steps to reproduce:

Start an Ionic 4 application with angular and capacitor and try and use the capacitor camera plug in. Try and include pwa-elements without a online script reference.

Other information:

https://stackoverflow.com/questions/54589782/how-to-include-ionic-pwa-elements-in-an-ionic4-angular-build

jcesarmobile/capacitor-angular-camera-sample#1

ionic-team/capacitor#658

https://forum.getcapacitor.com/t/how-to-include-ionic-pwa-elements-in-an-ionic4-angular-build/274

Camera freeze in iOS safari browser (PWA)

Resources:
Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

 insert the output from npm list @stencil/core here

Current behavior:

Camera freeze after camera launch for 1-2 seconds on iOS PWA.
Need press on the safari video recording button twice (disable and enable back the video recording) to make it working properly.

Expected behavior:

Steps to reproduce:

Related code:

insert any relevant code here

Other information:

CameraSource.Prompt configuration is not working

I'm submitting a ... (check one with "x")
[x] bug report

Current behavior:
The camera modal is opening without prompt in the web browser. however in android is working as expected

Expected behavior:
when camera options configuration include "source: CameraSource.Prompt", a prompt shall appear asking whether to take picture or from photos

Steps to reproduce:
I am using
Ionic 4 + Angular + Capacitor + pwa-elements
1- configure Camera Options with source: CameraSource.Prompt
2- ionic serve
3- open the camera modal by executing Plugins.Camera.getPhoto
4- Camera Modal will open directly without prompt
-->

Related code:
const image = await Plugins.Camera.getPhoto({
quality: 50,
source: CameraSource.Prompt,
correctOrientation: true,
width: 600,
resultType: CameraResultType.DataUrl,
});

Toast messages don't respect line breaks

I can not figure out how to create line breaks in a toast message. When on Android, for example, I can use \n to insert a newline, which works great. However, the same messages are being flattened to one line in the PWA, which looks ugly. Is there a way to represent line breaks?

I'm submitting a ...
[x] bug report
[x] feature request
[x] support request

Current behavior:
All whitespace (\n, \t, multiple spaces in a row) in the input text of the Toast plugin seems to be normalized to a single space. When I try to use HTML line breaks like <br />, they are passed through un-parsed.

Expected behavior:
There should be a way to represent line breaks in the toast messages, like on other Capacitor-supported platforms. Ideally this should simply respect the \n character so toast works identically across platforms.

Steps to reproduce:
On a browser page with both pwa elements and capacitor.js, paste in the developer console:

window.Capacitor.Plugins.Toast.show({ text: "0m 11s spent on Meditate \n Meditate ➤ Workout \n Starting from 0m 0s", duration: '10000'}).then();

Camera picker on web: unexpected label on hover

Switching between front and rear cameras causes Chrome to freeze on Android 11

npm list @stencil/core
-- @stencil/[email protected]

I'm submitting a ...
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:
While using Android 11's Chrome browser, any attempt to switch between front and rear cameras causes the entire browser to freeze.

Expected behavior:
The user should be able to switch between cameras without causing the browser to freeze.

Steps to reproduce:

Open the pwa-camera overlay, the camera initializes and starts streaming as expected.
Attempt to switch to rear camera, the browser becomes unresponsive without any errors showing on the console.

Tested in a fresh project, against both Capacitor v2 and v3, and using the latest pwa-elements version:
@capacitor/core": "^2.4.7"
@ionic/pwa-elements": "^3.0.2"

The issue can be reproduced on:

Samsung Galaxy s10 Android 11, Chrome 89.0.4389.90
Samsung Galaxy S21 Android 11, Chrome Beta 90.0.4430.19
Xiaomi Mi 10T, Android 11 (MIUI 12.1.2)
OnePlus Nord, Android 11

Workign as expected on:

Samsung Galaxy s10 Android 11 on Chrome Beta 90.0.4430.19

Related code:
rotate() attempts to stop previous streams and it seems to be the causing the issue:

stopStream() {
this.stream && this.stream.getTracks().forEach(track => track.stop());
}

Other information:
Twilio's issue tracker shows the same issue and some possible solutions:
twilio/twilio-video-app-react#355

I intend to submit a pull request with one of the possible workarounds.

The default camera should be Rear not Front

Current behavior:
The default camera should be Rear not Front

Expected behavior:
The default camera should be Rear not Front

Steps to reproduce:
Tested on galaxy S20+

Related code:

import {
  Camera,
  CameraResultType,
  CameraSource,
  CameraDirection,
} from '@capacitor/core';

const image = await Camera.getPhoto({
        resultType: CameraResultType.DataUrl,
        source: CameraSource.Camera,
        direction: CameraDirection.Rear,
        quality: 100,
      });
      const imageDataUrl = image.dataUrl;

Camera: Uncaught (in promise) TypeError: Cannot read property 'length' of undefined

npm list @stencil/core
I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

ERROR
pwa-camera.entry.js:292 Uncaught (in promise) TypeError: Cannot read property 'length' of undefined
at CameraPWA.initPhotoCapabilities (pwa-camera.entry.js:292)
at async CameraPWA.initStream (pwa-camera.entry.js:281)

Expected behavior:

Steps to reproduce:
I follow the development code on https://ionicframework.com/docs/angular/your-first-app/2-taking-photos

Ionic:

Ionic CLI : 6.12.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.4.1
@angular-devkit/build-angular : 0.1002.0
@angular-devkit/schematics : 10.0.8
@angular/cli : 10.2.0
@ionic/angular-toolkit : 2.3.3

Capacitor:

Capacitor CLI : 2.4.2
@capacitor/core : 2.4.2

Utility:

cordova-res : 0.15.1
native-run : 1.2.2

System:

NodeJS : v12.16.0 (/usr/local/bin/node)
npm : 6.14.8
OS : macOS Catalina

Switching camera (e.g. Front to Rear) is not working in Safari

Current behavior:
When clicking the camera rotate (div.rotate) button in Safari 14.0.1, the screen becomes black and the camera stops working. Switching back (to the front camera) is not possible.

Expected behavior:
I would expect that similarly to e.g. Chrome, the camera cannot be switched if only one camera is detected.

Steps to reproduce:
0. Use pwa-elements in Safari

Start camera
Click

3. Black screen comes up

Related code:
Not needed. It's reproducible when using 'npm run start' on pwa-elements' main branch.

Other information:
The console will give out the following error:
[Error] TypeError: undefined is not an object (evaluating 'c.facingMode[0]') rotate (pwa-camera.entry.js:404) (anonymous function) (pwa-camera.entry.js:185)

Suggested solution:
Add && facingMode !== undefined solves the problem:

Current version conflicts with latest version of ionic

Stencil version:

├─┬ @ionic/[email protected]
│ └── @stencil/[email protected]
└── @stencil/[email protected]

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:
Several typings issues between current version of @ionic/pwa-elements and @ionic/core when building an app with latest ionic such as:

Interface 'HTMLIonNavElement' cannot simultaneously extend types 'IonNav' and 'IonNav'. Named property
           ''getByIndex'' of types 'IonNav' and 'IonNav' are not identical.

Steps to Reproduce

Build ionic app with @ionic/[email protected]
install ionic-pwa elements
observe typescript errors

Expected behavior:
No typescript errors when integrating with latest ionic

Related code:
To fix the issue: update ionic and stencil to latest versions.

"@ionic/core": "^4.0.0-beta.15",
"@stencil/core": "^0.15.2"

Modals not useable with Ionic pwa-elements and Ionic v3

Stencil version:
No stencil added to project

Current behavior:
I am trying to use PWA elements in an Ionic (v3.9.6) app and its working great. I have added the script via my index.html.

However any modal is now rendered unclickable. Also not visible on smaller screens.

When removing the PWA elements script the modals work.

Expected behavior:
The modals should work correctly.

Steps to reproduce:

Start Ionic v3 project
Add PWA elements
Attempt to use Modal

Related code:
I was also able to render the modal on mobile by adding this SCSS

@media all and (max-width: 767px) {
  .modal-wrapper {
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

Other information:
You can view the issue here:
http://www.giphy.com/gifs/S3P43BsZaFCh53gzOR

Angular Build: Conflicting identifier ElementTagNameMap

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

`-- @stencil/[email protected]

Current behavior:

ng builds throws an error:

[0] ERROR in ../../../node_modules/@ionic/pwa-elements/dist/types/components.d.ts:96:13 - error TS2300: Duplicate identifier 'ElementTagNameMap'.
[0]
[0] 96   interface ElementTagNameMap extends HTMLElementTagNameMap {}
[0]                ~~~~~~~~~~~~~~~~~
[0]
[0]   ../../../node_modules/typescript/lib/lib.dom.d.ts:18110:6
[0]     18110 type ElementTagNameMap = HTMLElementTagNameMap & Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>;
[0]                ~~~~~~~~~~~~~~~~~
[0]     'ElementTagNameMap' was also declared here.
[0] ../../../node_modules/typescript/lib/lib.dom.d.ts:18110:6 - error TS2300: Duplicate identifier 'ElementTagNameMap'.
[0]
[0] 18110 type ElementTagNameMap = HTMLElementTagNameMap & Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>;
[0]            ~~~~~~~~~~~~~~~~~
[0]
[0]   ../../../node_modules/@ionic/pwa-elements/dist/types/components.d.ts:96:13
[0]     96   interface ElementTagNameMap extends HTMLElementTagNameMap {}
[0]                    ~~~~~~~~~~~~~~~~~
[0]     'ElementTagNameMap' was also declared here.

Expected behavior:

build without any errors

Steps to reproduce:

ionic start myapp blank --type=angular --capacitor
add @ionic/pwa-elements
update all dependecies:

"dependencies": {
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "@capacitor/core": "1.1.1",
    "@ionic-native/core": "^5.11.0",
    "@ionic-native/splash-screen": "^5.11.0",
    "@ionic-native/status-bar": "^5.11.0",
    "@ionic/angular": "^4.7.1",
    "@ionic/pwa-elements": "^1.3.0",
    "core-js": "^3.1.4",
    "rxjs": "~6.5.2",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.0"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.802.0",
    "@angular-devkit/build-angular": "~0.802.0",
    "@angular-devkit/core": "~8.2.0",
    "@angular-devkit/schematics": "~8.2.0",
    "@angular/cli": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/compiler-cli": "~8.2.0",
    "@angular/language-service": "~8.2.0",
    "@capacitor/cli": "1.1.1",
    "@ionic/angular-toolkit": "~2.0.0",
    "@types/jasmine": "~3.3.16",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "~12.6.8",
    "codelyzer": "^5.1.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.2.0",
    "karma-chrome-launcher": "~3.0.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.2",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.5.3"
  }

add import to main.ts: import '@ionic/pwa-elements';
npm run build

Related code:

insert any relevant code here

Other information:

Can't find a use button in Camera Modal

I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:
Open the camera using capacitor camera plugin in web, it opens the camera modal. And after take a photo, i can't find the button for use that photo. Kindly refer the image.

Expected behavior:
The camera should have accept button

Steps to reproduce:
Use the capacitor camera plugin in a web

Other information:

@capacitor/cli: 1.2.0

@capacitor/core: 1.2.0

@capacitor/android: 1.2.0

@capacitor/ios: 1.2.0

@ionic/[email protected]

pwa-elements don't include toast on >= 1.0.0

Resources:
Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

 insert the output from npm list @stencil/core here

I'm submitting a ... (check one with "x")
[ x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:
pwa-elements >= 1.0.0 doesn't include toast

Expected behavior:
include toast as on 0.0.14

Steps to reproduce:

Related code:

insert any relevant code here

Other information:

stencil version provides a broken acorn release

Updated my app to @ionic/angular v4.1.0. The app was originally started with v4.0.0-beta17 and with capacitor enabled.
Updated all the packages to the latest versions, but when running serve this error pops up:

[ng] ERROR in ./node_modules/@ionic/core/dist/esm/es5/ionic.core.js 6:2160
[ng] Module parse failed: Unexpected token (6:2160)                       
[ng] You may need an appropriate loader to handle this file type.

Mike pointed me to this bug: ionic-team/ionic-framework#17225

The output of `npm ls acorn' with ionic-pwa-elements installed:

└─┬ @ionic/[email protected]
  └─┬ @stencil/[email protected]   
    └─┬ [email protected]        
      ├── [email protected]        
      └─┬ [email protected]
        └── [email protected]

After I remove it (and all the capacitor related packages) and run npm install again, it works.

Toast Messages Overlap Each Other

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request

Current behavior:
When a toast message is displayed, it stays on screen for a period of time and then goes away. If a second toast message is produced before it disappears, it will overlap the first, even if there was not enough time to read the first toast (or even notice it appear).

Expected behavior:
The subsequent toast messages would either a) stack up vertically, as in other usages or b) queue up to be displayed one-by-one, like android toasts

Steps to reproduce:

Send a Toast.
Immediately send another Toast.

Camera Modal Cancel (Retake) Button JS Error

-- @stencil/[email protected]


**I'm submitting a ...**  (check one with "x")
[x] bug report

**Current behavior:**
1- On Click the Cancel (Retake) Button in the Camera Footer (Not the Close Button in the Camera Header), The Camera Modal Preview Shows a black screen, however you can still capture a picture.

2- Then, If you click Rotate Button in the Camera Footer you will get the following js error:

Uncaught (in promise) TypeError: Cannot set property 'srcObject' of null
    at CameraPWA.initStream (pwa-camera.entry.js:222)
    at CameraPWA.initCamera (pwa-camera.entry.js:214)


3- Then, if you try to Capture again, 
Unable to take photo! DOMException
pwa-camera.entry.js:259


**Expected behavior:**
On Click the Cancel (Retake) Button in the Camera Footer, you get the normal preview and be able to capture again.

**Steps to reproduce:**
Use Ionic4 + Angular 8 + Capacitor + pwa-elements

Unable to load dynamic imports with vite

Resources:

dependencies:
@capacitor/camera 1.3.1
@capacitor/core 3.4.3
@ionic/pwa-elements 3.1.1
@ionic/vue 6.0.13
vue 3.2.31
vue-router 4.0.14

devDependencies:
@vitejs/plugin-vue 2.2.4
vite 2.8.6

Current behavior:
Error when trying to use the PWA Elements camera with vite:

Expected behavior:
Module should load and a modal camera should appear.

Steps to reproduce:
Build, run, and push the SNAP button.

Other information:

Error and call stack:

TypeError: Failed to fetch dynamically imported module:
   http://localhost:3000/node_modules/.vite/pwa-action-sheet.entry.js
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'isProxied')
    at core-f86805ad.js:1176:25
    at step (core-f86805ad.js:45:23)
    at Object.next (core-f86805ad.js:26:53)
    at fulfilled (core-f86805ad.js:17:58)

Uncaught (in promise) TypeError: Cannot read property 'length' of undefined pwa-camera.entry.js?da8b:404

Resources:
Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

[email protected] C:\Users\FAITHFUL\Desktop\apps\App\oyfims-mobile
`-- (empty)

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Error in console:
Uncaught (in promise) TypeError: Cannot read property 'length' of undefined
at class_1.eval (pwa-camera.entry.js?da8b:404)
at step (pwa-camera.entry.js?da8b:32)
at Object.eval [as next] (pwa-camera.entry.js?da8b:13)
at fulfilled (pwa-camera.entry.js?da8b:4).

Expected behavior:

Steps to reproduce:

Related code:

async usePhotoCamera () {
        const cameraPhoto = await Camera.getPhoto({
          resultType: CameraResultType.Uri,
          source: CameraSource.Camera,
          quality: 100,
          allowEditing: true
        })

        this.camPhoto = cameraPhoto.webPath

        return cameraPhoto.webPath
    },

Other information:
On tap button camera opens and works fine but once the camera is open theres an error in console.

Tool request: provide a codesandbox example to easily test PWA elements components

A codesanbox can easily help use to test PWA elements / props.

Do you plan to provide one generic example ?

feat: Camera should allow for additional `accept` types for file selection

ionic/pwa-elements version:

@ionic/[email protected]

I'm submitting a ... (check one with "x")
[ ] bug report
[x] feature request

Current behavior:
At the moment accept="image/*" is hard coded as accepted input types, when users choose to select a local file/file from disk.

Expected behavior:
Enable configuration of PWA camera for specifying accepted input types e.g. accept="image/png,image/jpeg"

Lines 466 to 471 in 6e1394a

    
           <input 
        
             type="file" 
        
             id="_pwa-elements-file-pick" 
        
             onChange={this.handleFileInputChange} 
        
             accept="image/*" 
        
             class="pick-image-button" />

Other information:
https://forum.ionicframework.com/t/restrict-file-types-in-pwa-camera-from-ionic-pwa-elements-when-selecting-local-image/208222

Camera modal is trying to render an undefined element

I am using

Ionic:

Ionic CLI : 6.4.1 E:\Users\🕵️‍♀️\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.0.7
@angular-devkit/build-angular : 0.901.1
@angular-devkit/schematics : 8.3.25
@angular/cli : 9.1.1
@ionic/angular-toolkit : 2.2.0

Capacitor:

Capacitor CLI : 2.0.0
@capacitor/core : 2.0.0

Cordova:

Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (0 plugins total)

Utility:

cordova-res : not installed
native-run : not installed

System:

Android SDK Tools : 26.1.1 (H:\Users\🕵️‍♀️\AppData\Local\Android\sdk)
NodeJS : v13.12.0 (G:\Mes Programs Filez\nodejs\node.exe)
npm : 6.14.4
OS : Windows 10

I'm submitting a ... (check one with "x")
[*] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:

Related code:
I found the bug appears to be in node_modules/@ionic/pwa-elements/dist/esm/pwa-camera.entry.js

 render() {
        const videoStreamStyle = this.facingMode == "user" ? { transform: 'scaleX(-1)' } : {};
        return (h("div", { class: "camera-wrapper" }, h("div", { class: "camera-header" }, h("section", { class: "items" }, h("div", { class: "item close", onClick: e => this.handleClose(e) }, h("img", { src: this.iconExit() })), h("div", { class: "item flash", onClick: e => this.handleFlashClick(e) }, this.flashModes.length > 0 && (h("div", null, this.flashMode == 'off' ? h("img", { src: this.iconFlashOff() }) : '', this.flashMode == 'auto' ? h("img", { src: this.iconFlashAuto() }) : '', this.flashMode == 'flash' ? h("img", { src: this.iconFlashOn() }) : ''))))), this.photo && (h("div", { class: "accept" }, h("div", { class: "accept-image", style: { backgroundImage: `url(${this.photoSrc})` } }))), h("div", { class: "camera-video", style: { display: this.photo ? 'none' : '' } }, this.showShutterOverlay && (h("div", { class: "shutter-overlay" })), this.hasImageCapture() ? (h("video", { style: videoStreamStyle, ref: (el) => this.videoElement = el, autoplay: true, playsinline: true })) : (h("canvas", { ref: (el) => this.canvasElement = el, width: "100%", height: "100%" })), h("canvas", { class: "offscreen-image-render", ref: e => this.offscreenCanvas = e, width: "100%", height: "100%" })), h("div", { class: "camera-footer" }, !this.photo ? ([
            h("div", { class: "shutter", onClick: (e) => this.handleShutterClick(e) }, h("div", { class: "shutter-button" })),
            h("div", { class: "rotate", onClick: (e) => this.handleRotateClick(e) }, h("img", { src: this.iconReverseCamera() })),
            { /*this.hasMultipleCameras && (<div class="item rotate" onClick={(e) => this.handleRotateClick(e)}></div>)*/}
        ]) : (h("section", { class: "items" }, h("div", { class: "item accept-cancel", onClick: e => this.handleCancelPhoto(e) }, h("img", { src: this.iconRetake() })), h("div", { class: "item accept-use", onClick: e => this.handleAcceptPhoto(e) }, h("img", { src: this.iconConfirm() })))))));
    }

If i remove the last element it disappears:

{ /*this.hasMultipleCameras && (<div class="item rotate" onClick={(e) => this.handleRotateClick(e)}></div>)*/}

Other information:

I would submit a pull request but i am guessing i need to learn 😅. I this is still here in two weeks, i will learn it during my free time and propose a fix.

The Rear camera is not working on devices with multiple cameras

Current behavior:
The Rear camera is not working on devices with multiple cameras

Expected behavior:
It should work on S20+ and Huawey P30 Lite -> MAR-LX3A

Steps to reproduce:
Use pwa-elements and capacitor core on Galaxy S20+ them try to rotate the camera to the front one.
This will happen:

Related code:

import {
  Camera,
  CameraResultType,
  CameraSource,
  CameraDirection,
} from '@capacitor/core';

const image = await Camera.getPhoto({
        resultType: CameraResultType.DataUrl,
        source: CameraSource.Camera,
        direction: CameraDirection.Rear,
        quality: 100,
      });
      const imageDataUrl = image.dataUrl;

Camera shows flipped image

When capacitor uses the pwa-elements camera plugin (in a browser) the picture is flipped horizontally.
This seems a common behaviour on browser camera:
https://christianheilmann.com/2013/07/19/flipping-the-image-when-accessing-the-laptop-camera-with-getusermedia/

In the above link it is recommended to flip it using CSS classes:
video {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}

Note: Yesterday I opened this bug in the capacitor repo (ionic-team/capacitor#997), I will now close it.

Toast messages occluded by page elements such as text boxes

I'm submitting a ...
[x] bug report
[ ] feature request

Current behavior:
When firing a toast message, some page elements are not covered properly by the toast. Instead, those elements cover the message!

In the example above, the elements are not set to unusual z-index values or anything.

Expected behavior:
The Toast message, since it is ephemeral, should cover just about everything. I think it should have some transparency in it's backdrop, which should help if anything underneath it needs to be seen.

Steps to reproduce:
In your browser console try sending a toast on a page with PWA elements:

window.Capacitor.Plugins.Toast.show({ text: "Here's a long Toast message. You can see under me, but if you scroll the page, some elements cover me up!", duration: '10000'}).then();

Then attempt to scroll elements past it, such as form input elements (like those pictured above).

Potential solution
Increase Toast Z-index?

Types clash when using along with @ionic/[email protected] (again again 🙄🙄)

To replace #18.

@mlynch @mhartington this is getting quite frustrating to work with... every time an Ionic interface changes, the @ionic/pwa-elements package is blocking us from updating ionic/core in our project.

[ ERROR ]  TypeScript: node_modules/@ionic/pwa-elements/node_modules/@ionic/core/dist/types/components.d.ts:5142:4
           Subsequent property declarations must have the same type. Property ''IonRange'' must be of type 'IonRange',
           but here has type 'IonRange'.

   L5141:  'IonRadio': Components.IonRadio;
   L5142:  'IonRange': Components.IonRange;
   L5143:  'IonRefresherContent': Components.IonRefresherContent;

[ ERROR ]  TypeScript: node_modules/@ionic/pwa-elements/node_modules/@ionic/core/dist/types/components.d.ts:5208:4
           Subsequent property declarations must have the same type. Property ''ion-img'' must be of type
           'IonImgAttributes', but here has type 'IonImgAttributes'.

   L5207:  'ion-header': Components.IonHeaderAttributes;
   L5208:  'ion-img': Components.IonImgAttributes;
   L5209:  'ion-infinite-scroll-content': Components.IonInfiniteScrollContentAttributes;

[ ERROR ]  TypeScript: node_modules/@ionic/pwa-elements/node_modules/@ionic/core/dist/types/components.d.ts:5242:4
           Subsequent property declarations must have the same type. Property ''ion-range'' must be of type
           'IonRangeAttributes', but here has type 'IonRangeAttributes'.

   L5241:  'ion-radio': Components.IonRadioAttributes;
   L5242:  'ion-range': Components.IonRangeAttributes;
   L5243:  'ion-refresher-content': Components.IonRefresherContentAttributes;

May I suggest removing ionic from the dependencies (there's only one interface imported anyway), and adding

{
  "peerDependencies": {
    "@ionic/core": "^4.0.0"
  }
}

to package.json?

Ability for the Camera to choose between multiple rear cameras

I'm submitting a ... (check one with "x")
[ ] bug report
[ x] feature request
[ ] support request

Current behavior:
Default selects wide angle camera on the rear instead of portrait camera which is the default for many native apps

Expected behavior:
Default camera on rear should be the primary camera (usually portrait) and possible offer the ability to switch between other rear cameras between wide/portrait

Other information:

This plugin has camera switches and ability to roll through more than 2 cameras on the device

https://basst314.github.io/ngx-webcam

Create action sheet component

Bug Report

Ionic version:

[x] 5.x

Current behavior:

Displaying a capacitor modal worked fine in Ionic 4. As of Ionic 5 the following code crashes:

import { Plugins, ActionSheetOptionStyle } from '@capacitor/core';
// ...
const { Modals } = Plugins;
const value = await Modals.showActions({
  title: 'Are you sure?',
  options: [
    {
      title: 'Logout',
      style: ActionSheetOptionStyle.Destructive
    },
    {
      title: 'Cancel',
      style: ActionSheetOptionStyle.Cancel
    }
  ]
});

Error:

Unhandled Rejection (TypeError): controller.componentOnReady is not a function
ModalsPluginWeb.<anonymous>
src/web/modals.ts:51
  48 | return __generator(this, function (_a) {
  49 |     switch (_a.label) {
  50 |         case 0:
> 51 |             controller = document.querySelector('ion-action-sheet-controller');
     | ^  52 |             if (!controller) {
  53 |                 controller = document.createElement('ion-action-sheet-controller');
  54 |                 document.body.appendChild(controller);
View compiled
▶ 4 stack frames were collapsed.
(anonymous function)
src/web/modals.ts:43
  40 |     });
  41 | };
  42 | ModalsPluginWeb.prototype.showActions = function (options) {
> 43 |     return __awaiter(this, void 0, void 0, function () {
     | ^  44 |         var _this = this;
  45 |         return __generator(this, function (_a) {
  46 |             return [2 /*return*/, new Promise(function (resolve, _reject) { return __awaiter(_this, void 0, void 0, function () {
View compiled
ModalsPluginWeb.<anonymous>
src/web/modals.ts:43
  40 |     });
  41 | };
  42 | ModalsPluginWeb.prototype.showActions = function (options) {
> 43 |     return __awaiter(this, void 0, void 0, function () {
     | ^  44 |         var _this = this;
  45 |         return __generator(this, function (_a) {
  46 |             return [2 /*return*/, new Promise(function (resolve, _reject) { return __awaiter(_this, void 0, void 0, function () {

Expected behavior:

When viewing on the web, a "native like" UI should be shown to allow the user to pick a button.

Steps to reproduce:

Create an Ionic v4 app with Capacitor
Display a modal with the Capacitor plugin
It works!
Upgrade to Ionic v5
It crashes!

Ionic info:

Ionic:

   Ionic CLI       : 6.1.0 (/Users/username/.asdf/installs/nodejs/12.11.0/.npm/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.0.0

Capacitor:

   Capacitor CLI   : 1.5.0
   @capacitor/core : 1.5.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.11.0 (/Users/username/.asdf/installs/nodejs/12.11.0/bin/node)
   npm    : 6.11.3
   OS     : macOS Catalina

bug: Camera modal shows 'undefined' on footer, next to shutter

Bug Report

Capacitor Version

npx cap doctor output:
💊 Capacitor Doctor 💊

Latest Dependencies:

@capacitor/cli: 1.5.1

@capacitor/core: 1.5.1

@capacitor/android: 1.5.1

@capacitor/ios: 1.5.1

Installed Dependencies:

@capacitor/android not installed

@capacitor/cli 1.5.1

@capacitor/core 1.5.1

@capacitor/ios 1.5.1

Found 7 Capacitor plugins for ios:
cordova-plugin-camera (4.1.0)
cordova-plugin-device (2.0.2)
cordova-plugin-ionic-keyboard (2.2.0)
cordova-plugin-ionic-webview (4.1.3)
cordova-plugin-splashscreen (5.0.2)
cordova-plugin-statusbar (2.4.2)
cordova-plugin-whitelist (1.3.3)
[success] iOS looking great! 👌

Affected Platform(s)

Android
iOS
Electron
Web

Current Behavior

When the function "getPhoto" is executed, the camera modal is opened as expected. But the world "undefined" is placed on the camera-footer element, just next to the shutter.
Overmore, when the user takes the photo and clicks the "retake" button, the camera modal goes totally black.
Screenshots attached.

Expected Behavior

The camera modal shouldn't have an "undefined" message next to the buttons.
If the user clicks the "retake" button, the camera should open again and let to take the photo.

Sample Code or Sample Application Repo

`async takePhoto() {
this.photo = '';
this.showButton = false;

try {

  const image = await Plugins.Camera.getPhoto({
    quality: 72,
    allowEditing: false,
    resultType: CameraResultType.DataUrl,
    source: CameraSource.Camera
  });

  if (!image)
    return this.nav.navigateBack('/start');

  this.photo = this.domSanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
  this.showButton = this.photo ? true : false;
  return;
} catch (error) {
  console.log(error);
  return this.nav.navigateBack('/start');
}

Reproduction Steps

In the first screenshot the camera works properly but with the 'undefined' message.
In the second screenshot, the user clicked the 'retake' button and then the camera went all black.

Those screenshots where taken on Google Chrome from and Android device. But it also reproduces in any browser in mobile and in desktop.

Other Technical Details

npm --version output: 6.13.7

node --version output: v12.14.0

pod --version output (iOS issues only):

Other Information

Bump stencil version to latest

Camera Modal does not load properly

Resources:
Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

@stencil/[email protected]

Current behavior:
When using the Plugins.Camera.GetPhoto method, the Modal doesn't load properly. The following message is displayed in the console:

    at setValue$1 (chunk-9d02d80f.js:3247)
    at CameraPWA.set [as facingMode] (chunk-9d02d80f.js:3281)
    at new CameraPWA (pwa-camera.entry.js:162)
    at initializeComponent$1 (chunk-9d02d80f.js:3379)
consoleError$1 @ chunk-9d02d80f.js:2362
initializeComponent$1 @ chunk-9d02d80f.js:3382
async function (async)
initializeComponent$1 @ chunk-9d02d80f.js:3363
connectedCallback$1 @ chunk-9d02d80f.js:3462
connectedCallback @ chunk-9d02d80f.js:3516
addVnodes$1 @ chunk-9d02d80f.js:2890
patch$1 @ chunk-9d02d80f.js:3032
renderVdom$1 @ chunk-9d02d80f.js:3072
updateComponent$1 @ chunk-9d02d80f.js:3119
(anonymous) @ chunk-9d02d80f.js:3094
consumeTimeout$1 @ chunk-9d02d80f.js:2406
flush$1 @ chunk-9d02d80f.js:2429
requestAnimationFrame (async)
raf @ chunk-9d02d80f.js:2317
(anonymous) @ chunk-9d02d80f.js:2387
scheduleUpdate$1 @ chunk-9d02d80f.js:3094
initializeComponent$1 @ chunk-9d02d80f.js:3413
async function (async)
initializeComponent$1 @ chunk-9d02d80f.js:3363
connectedCallback$1 @ chunk-9d02d80f.js:3462
connectedCallback @ chunk-9d02d80f.js:3516
present @ pwa-camera-modal.entry.js:17
(anonymous) @ chunk-9d02d80f.js:3292
Promise.then (async)
value @ chunk-9d02d80f.js:3292
(anonymous) @ app-profile.entry.js:635
step @ app-profile.entry.js:399
(anonymous) @ app-profile.entry.js:380
fulfilled @ app-profile.entry.js:370
Promise.then (async)
step @ app-profile.entry.js:372
(anonymous) @ app-profile.entry.js:373
__awaiter @ app-profile.entry.js:369
(anonymous) @ app-profile.entry.js:598
(anonymous) @ app-profile.entry.js:598
step @ app-profile.entry.js:399
(anonymous) @ app-profile.entry.js:380
(anonymous) @ app-profile.entry.js:373
__awaiter @ app-profile.entry.js:369
CameraPluginWeb.getPhoto @ app-profile.entry.js:594
camera @ app-profile.entry.js:1910
onClick @ app-profile.entry.js:1906
chunk-9d02d80f.js:2362 TypeError: Cannot read property '$instanceValues$' of undefined
    at getValue$1 (chunk-9d02d80f.js:3243)
    at CameraPWA.get [as facingMode] (chunk-9d02d80f.js:3277)
    at CameraPWA.render (pwa-camera.entry.js:357)
    at updateComponent$1 (chunk-9d02d80f.js:3119)
    at Array.<anonymous> (chunk-9d02d80f.js:3094)
    at consumeTimeout$1 (chunk-9d02d80f.js:2406)
    at flush$1 (chunk-9d02d80f.js:2429)
consoleError$1 @ chunk-9d02d80f.js:2362
updateComponent$1 @ chunk-9d02d80f.js:3122
(anonymous) @ chunk-9d02d80f.js:3094
consumeTimeout$1 @ chunk-9d02d80f.js:2406
flush$1 @ chunk-9d02d80f.js:2429
requestAnimationFrame (async)
raf @ chunk-9d02d80f.js:2317
(anonymous) @ chunk-9d02d80f.js:2387
scheduleUpdate$1 @ chunk-9d02d80f.js:3094
initializeComponent$1 @ chunk-9d02d80f.js:3413
async function (async)
initializeComponent$1 @ chunk-9d02d80f.js:3363
connectedCallback$1 @ chunk-9d02d80f.js:3462
connectedCallback @ chunk-9d02d80f.js:3516
addVnodes$1 @ chunk-9d02d80f.js:2890
patch$1 @ chunk-9d02d80f.js:3032
renderVdom$1 @ chunk-9d02d80f.js:3072
updateComponent$1 @ chunk-9d02d80f.js:3119
(anonymous) @ chunk-9d02d80f.js:3094
consumeTimeout$1 @ chunk-9d02d80f.js:2406
flush$1 @ chunk-9d02d80f.js:2429
requestAnimationFrame (async)
raf @ chunk-9d02d80f.js:2317
(anonymous) @ chunk-9d02d80f.js:2387
scheduleUpdate$1 @ chunk-9d02d80f.js:3094
initializeComponent$1 @ chunk-9d02d80f.js:3413
async function (async)
initializeComponent$1 @ chunk-9d02d80f.js:3363
connectedCallback$1 @ chunk-9d02d80f.js:3462
connectedCallback @ chunk-9d02d80f.js:3516
present @ pwa-camera-modal.entry.js:17
(anonymous) @ chunk-9d02d80f.js:3292
Promise.then (async)
value @ chunk-9d02d80f.js:3292
(anonymous) @ app-profile.entry.js:635
step @ app-profile.entry.js:399
(anonymous) @ app-profile.entry.js:380
fulfilled @ app-profile.entry.js:370
Promise.then (async)
step @ app-profile.entry.js:372
(anonymous) @ app-profile.entry.js:373
__awaiter @ app-profile.entry.js:369
(anonymous) @ app-profile.entry.js:598
(anonymous) @ app-profile.entry.js:598
step @ app-profile.entry.js:399
(anonymous) @ app-profile.entry.js:380
(anonymous) @ app-profile.entry.js:373
__awaiter @ app-profile.entry.js:369
CameraPluginWeb.getPhoto @ app-profile.entry.js:594
camera @ app-profile.entry.js:1910
onClick @ app-profile.entry.js:1906
chunk-9d02d80f.js:2362 TypeError: Cannot read property '$instanceValues$' of undefined
    at getValue$1 (chunk-9d02d80f.js:3243)
    at CameraPWA.get [as facingMode] (chunk-9d02d80f.js:3277)
    at CameraPWA.componentDidLoad (pwa-camera.entry.js:181)
    at safeCall$1 (chunk-9d02d80f.js:3078)
    at postUpdateComponent$1 (chunk-9d02d80f.js:3158)
    at updateComponent$1 (chunk-9d02d80f.js:3144)
    at Array.<anonymous> (chunk-9d02d80f.js:3094)
    at consumeTimeout$1 (chunk-9d02d80f.js:2406)
    at flush$1 (chunk-9d02d80f.js:2429)

Expected behavior:
Display the modal correctly so the camera works

Steps to reproduce:

Follow the instructions here to create a new project using ionic-pwa option
Add the following libraries to the package.json file:

    "@capacitor/core": "^1.1.0",
    "@ionic/core": "ˆ4.6.0",
    "@ionic/pwa-elements": "^1.3.0",
    "@stencil/core": "ˆ1.1.3"

Add the following to the app.ts file:

import '@ionic/core';
import '@ionic/pwa-elements';
import { defineCustomElements } from '@ionic/pwa-elements/loader';

defineCustomElements(window);

Replace the button on the app-home.tsx file to run the following function:

   async camera() {
    const ph = await Plugins.Camera.getPhoto({
      quality: 100,
      allowEditing: false,
      resultType: CameraResultType.DataUrl,
      source: CameraSource.Camera
    });
    console.log(ph);
  }

Open the console and get the errors described above.

Related code:

insert any relevant code here

Other information:
Created a repo that reproduces the error:
https://github.com/MCanhisares/ion-pwa-camera-error

No option to choose existing photo

I'm submitting a ...
[ ] bug report
[ X ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:
Camera Plugin does not support loading photo from library or prompting user to choose. This works on native but is not implemented currently with pwa-elements.

Expected behavior:
const image = await Camera.getPhoto({ quality: 75, allowEditing: true, resultType: CameraResultType.DataUrl, source: CameraSource.Photos });
This should load photo library for user to choose photo.

const image = await Camera.getPhoto({ quality: 75, allowEditing: true, resultType: CameraResultType.DataUrl, source: CameraSource.Prompt });
This should prompt user to choose between take photo and choose photo.

Other information:
Testing on:
"@ionic/pwa-elements": "^1.2.7", "@capacitor/cli": "1.0.0", "@capacitor/core": "1.0.0", "@capacitor/ios": "^1.0.0",

feat: allow toast position

Capacitor's Toast introduced position feature for iOS and Android, would be good to also have it in web/electron, but pwa-elements doesn't support it at the moment.

found 2 moderate severity vulnerabilities

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

C:\ae\aedev\ionic-pwa-elements>npm list @stencil/core
@ionic/[email protected] C:\ae\aedev\ionic-pwa-elements
`-- @stencil/[email protected]

Current behavior:

Build and get security warnings.

Expected behavior:

Build and get NO security warnings.

Steps to reproduce:

Related code:

C:\ae\aedev\ionic-pwa-elements>npm i
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 402 packages from 372 contributors and audited 3075 packages in 22.847s
found 2 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

C:\ae\aedev\ionic-pwa-elements>npm audit

                       === npm audit security report ===


                                 Manual Review
             Some vulnerabilities require your attention to resolve

          Visit https://go.npm.me/audit-guide for additional guidance


  Moderate        Regular Expression Denial of Service

  Package         semver

  Patched in      >=4.3.2

  Dependency of   @stencil/core

  Path            @stencil/core > rollup-plugin-node-builtins > browserify-fs
                  > levelup > semver

  More info       https://nodesecurity.io/advisories/31


  Moderate        Memory Exposure

  Package         bl

  Patched in      >=0.9.5 <1.0.0 || >=1.0.1

  Dependency of   @stencil/core

  Path            @stencil/core > rollup-plugin-node-builtins > browserify-fs
                  > levelup > bl

  More info       https://nodesecurity.io/advisories/596

found 2 moderate severity vulnerabilities in 3075 scanned packages
  2 vulnerabilities require manual review. See the full report for details.

C:\ae\aedev\ionic-pwa-elements>

Other information:

cancel photo click raise uncaught exception on web

Current behavior:
When taking a photo with capacitor in conjunction with "@ionic/pwa-elements", once the "validation" popup is show, an uncaught exception is thrown if you click on "cancel".

Expected behavior:
On "cancel" clicked, we should go back to the "taking picture" mode.

Steps to reproduce:
Here is a MRE demonstrating the bug: https://codesandbox.io/s/pedantic-kare-501iu?file=/src/App.tsx

Here is a screenrecording:

Screen.Recording.2021-12-13.at.15.35.55.mov

Related code:

I didn't had the time to investigate much, but seems like the issue occurs when we try to re-init the videoStream after cancel and the videoElement does not exist anymore:

pwa-elements/src/components/camera/camera.tsx

Line 330 in fb3f55e

this.initCamera({

pwa-elements/src/components/camera/camera.tsx

Line 123 in fb3f55e

this.videoElement.srcObject = stream;

source configuration. not working. can't enable for CameraSource.Camera / CameraSource.Photos

Hello friend. thanks for this plugin. maybe im found the problem
im using:
"@ionic/pwa-elements": "^3.0.2",
ionic vue
"@capacitor/core": "2.4.5",

Im using this plugin for my pwa apps. i want this plugin with only source.camera not source.prompt, but im still getting source.prompt. I've also tried source.photos but it still generates source.prompt. I do not know. is this a bug am i something wrong. please help my friend. Thank you in advance.

the rotate button also doesn't work on the web pwa. for mobile, I don't know, because I haven't tested it and there is no interest there

this my code

import { Plugins, CameraResultType, CameraSource } from '@capacitor/core';
...
Camera.getPhoto({
    quality: 100,
    source: CameraSource.Camera,
    resultType: CameraResultType.Base64
}).then((res) => {
    console.log(res)
})

i have reproduced this issue in this repo, you can clone this repo and run this after cloning
npm install && npm run serve
look src/components/ExplorerContainer.vue
https://github.com/aacassandra/ionic-vue-camera-testing

sorry about my bad english

A /undefined request is made when taking a photo

ionic/pwa-elements version:

@ionic/[email protected]

Current behavior:
After taking a photo but before the confirmation screen is visible, a /undefined network request is made. This happens because a variable used to set a background image is undefined for a short time:

Expected behavior:
No /undefined request is made.

Steps to reproduce:

Open the dev tools and keep an eye on the network requests
Open camera
Take a photo
A /undefined request is made

Related code:
camera.tsx, line 436

<div class="accept">
  <div
    class="accept-image"
    style={{
      backgroundImage: `url(${this.photoSrc})`,
      ...acceptStyles
    }} />
</div>

Related pull requests:
Since I looked at the code for the first time today and have no overview/understanding of the whole project, I don't know if the if clause in camera.tsx, line 431 is wrong (fixed in version 2) or if it should be caught if this.photoSrc is not set (fixed in version 2).

Version 1: #86
Version 2: #87

Library should be beta

There are serious shortcomings in this library and as such it should be marked as beta and/or the shortcoming should be stated on the README.

The image appearing inverted is a complete blocker and the fact the library does not work when run as a standalone PWA (home screen launch)
Also the forward facing camera is the default view and cannot be changed.
I have wasted significant time investing in this library only to learn of the bugs

As per your docs:

Currently, the project offers a quality in-app Camera experience using getUserMedia, with support for multiple cameras and with automatic handling of image data.

quality in-app Camera experience - i beg to differ

	<input
	type="file"
	id="_pwa-elements-file-pick"
	onChange={this.handleFileInputChange}
	accept="image/*"
	class="pick-image-button" />

ionic-team / pwa-elements Goto Github PK

pwa-elements's Introduction

Ionic Elements for Progressive Web Apps

Currently Supported

Capacitor Usage

pwa-elements's People

Contributors

Stargazers

Watchers

Forkers

pwa-elements's Issues

Problem

Need

Bug Report

Bug Report

Capacitor Version

Affected Platform(s)

Current Behavior

Expected Behavior

Sample Code or Sample Application Repo

Reproduction Steps

Other Technical Details

Other Information

Recommend Projects

Recommend Topics

Recommend Org