ionic-team / pwa-elements

Quality UI experiences for Web APIs that require custom UI (such as media/camera).
https://medium.com/@maxlynch/building-the-progressive-web-app-os-57daebcb69c1
MIT License
168 stars 50 forks source link

Camera modal is trying to render an undefined element #62

Closed bleuscyther closed 4 years ago

bleuscyther commented 4 years ago

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 (cordova-lib@9.0.1) 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:

image

Related code: I found the bug appears to be in _nodemodules/@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.

jcesarmobile commented 4 years ago

it was fixed, but not released, will release a new version today https://github.com/ionic-team/pwa-elements/pull/59