sarriaroman / photoviewer

PhotoViewer Cordova Plugin
MIT License
156 stars 200 forks source link

Is the Photoviewer only for Cordova projects? #225

Open Th-Barth opened 1 year ago

Th-Barth commented 1 year ago

Hi, when I click on an image, I get the error message:

Native: tried calling PhotoViewer.show, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

I have an Ionic 6, Angular, Capacitor App and I am trying to implement this photoviewer plugin

I followed these steps https://ionicframework.com/docs/native/photo-viewer https://github.com/sarriaroman/photoviewer npm i com-sarriaroman-photoviewer npm install --save @ionic-native/photo-viewer

The the Ionic extension for Visual Studio Code said I had to migrate to awesome cordova plugins

` [Ionic] Replace @ionic-native/photo-viewer...

npm install @awesome-cordova-plugins/photo-viewer --save-exact && npm uninstall @ionic-native/photo-viewer [Ionic] @ionic-native/photo-viewer Completed.

[Ionic] Install...

npm install @awesome-cordova-plugins/core --save-exact

Installed @awesome-cordova-plugins/core [Ionic] @awesome-cordova-plugins/core Completed. `

In the code with the showPhoto() method

` import { PhotoViewer } from '@awesome-cordova-plugins/photo-viewer';

var photooptions = { share: true, // default is false closeButton: false, // default is true copyToReference: true, // default is false headers: '', // If this is not provided, an exception will be triggered piccasoOptions: { } // If this is not provided, an exception will be triggered };

showPhoto(image) { console.log("image clicked", image); PhotoViewer.show(image, 'Photo', photooptions); } `

The error message says: "Make sure to include cordova.js" How? Will this mess up my project?

Th-Barth commented 1 year ago

The photoviewer works on my android device. Ok, I didnt know that Cordova is only for ios/android devices and not for the browser. Are there plans to make it available for Capacitor as well?

rvcroffi commented 1 year ago

The photoviewer works on my android device. Ok, I didnt know that Cordova is only for ios/android devices and not for the browser. Are there plans to make it available for Capacitor as well?

You should try this Capacitor plugin https://github.com/capacitor-community/photoviewer

Th-Barth commented 1 year ago

The photoviewer works on my android device. Ok, I didnt know that Cordova is only for ios/android devices and not for the browser. Are there plans to make it available for Capacitor as well?

You should try this Capacitor plugin https://github.com/capacitor-community/photoviewer

Hi, your comment comes at the right time. Today I wanted to start the app on my smartphone after long time and I get an depricated gradle build error:

FAILURE: Build failed with an exception.

     * Where:
     Script 'E:\ionic-workspace\myapp\node_modules\com-sarriaroman-photoviewer\src\android\photoviewer.gradle' line: 6

     * What went wrong:WARNING:Using flatDir should be avoided because it doesn't support any meta-data formats.

     A problem occurred evaluating script.
     > Could not find method compile() for arguments [com.commit451:PhotoView:1.2.4] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.

     * Try:
     > Run with --stacktrace option to get the stack trace.
     > Run with --info or --debug option to get more log output.
     > Run with --scan to get full insights.

     Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.
Th-Barth commented 1 year ago

https://github.com/capacitor-community/photoviewer

Unfortunately I get an error when installating this photoviewer, not compatible with capacitor 4:

npm install @capacitor-community/photoviewer npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: echat-app@0.0.1 npm ERR! Found: @capacitor/core@4.1.0 npm ERR! node_modules/@capacitor/core npm ERR! @capacitor/core@"^4.0.1" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @capacitor/core@"^3.4.1" from @capacitor-community/photoviewer@1.1.3 npm ERR! node_modules/@capacitor-community/photoviewer npm ERR! @capacitor-community/photoviewer@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

rvcroffi commented 1 year ago

Hmm, it's a @capacitor/core dependency conflict. Try to force the installation. npm install @capacitor-community/photoviewer --force I tested on web with Capacitor 4 and it worked. For iOS and Android the installation has extra steps: https://github.com/capacitor-community/photoviewer#installation

Th-Barth commented 1 year ago

Hmm, it's a @capacitor/core dependency conflict. Try to force the installation. npm install @capacitor-community/photoviewer --force I tested on web with Capacitor 4 and it worked. For iOS and Android the installation has extra steps: https://github.com/capacitor-community/photoviewer#installation

I installed the packages with --force and tried it for web, but I dont get to see the images as desribes here https://github.com/capacitor-community/photoviewer/blob/main/docs/Ionic-Angular-Usage.md

I only get the toast message: "echo Hello from PhotoViewer" called in the ngAfterViewInit-Method. But the urls to the images are valid!

I dont understand this photoviewer, so I cant use it. I just wish a Photoviewer to fullscreen images by one tap, that can be part of chat messages.