{"_id":"@dootix-developer/photoviewer","_rev":"1-d9240c02deba56468f2d247c5a85291d","name":"@dootix-developer/photoviewer","dist-tags":{"latest":"3.3.0"},"versions":{"3.3.0":{"name":"@dootix-developer/photoviewer","version":"3.3.0","keywords":["capacitor","plugin","native","photoviewer"],"author":{"name":"Dootix","email":"it@dootix.com"},"license":"MIT","_id":"@dootix-developer/photoviewer@3.3.0","maintainers":[{"name":"dootix","email":"it@dootix.com"}],"homepage":"https://github.com/capacitor-community/photoviewer#readme","bugs":{"url":"https://github.com/capacitor-community/photoviewer/issues"},"dist":{"shasum":"6c4884355b6cb15f0088738ca90c2a5bf4a6f297","tarball":"https://registry.npmjs.org/@dootix-developer/photoviewer/-/photoviewer-3.3.0.tgz","fileCount":79,"integrity":"sha512-7R5CCClOyoNeDznGkabsyWOzYy02rMj5hgMlm0/LlExQ+KlIt+yVS8rzQKGXY4DAEFMROgeu5JrMIpyZ5676hg==","signatures":[{"sig":"MEYCIQCKonlF9Fw4I60HZKO/12F4H2u3n6PumhEGxP0qAzLudgIhAMBgmLcgHiJ2tsMrAPx4dOhUj7XBUAxrRevTB+KOQSrv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261419},"main":"dist/plugin.cjs.js","types":"dist/esm/index.d.ts","unpkg":"dist/plugin.js","module":"dist/esm/index.js","engines":{"node":">=16.0.0"},"gitHead":"df4ca4bc1b4eaf67a2f10aef1a6739f3b041585b","scripts":{"fmt":"npm run eslint -- --fix && npm run prettier -- --write && npm run swiftlint -- autocorrect --format","lint":"npm run eslint && npm run prettier -- --check && npm run swiftlint -- lint","test":"echo \"No test specified\"","build":"npm run clean && npm run docgen && tsc && rollup -c rollup.config.js","clean":"rimraf ./dist","watch":"tsc --watch","docgen":"docgen --api PhotoViewerPlugin --output-readme docs/API.md --output-json dist/docs.json","eslint":"eslint . --ext ts","verify":"npm run verify:ios && npm run verify:android && npm run verify:web","prettier":"prettier \"**/*.{css,html,ts,js,java}\"","swiftlint":"node-swiftlint","verify:ios":"cd ios && pod install && xcodebuild -workspace Plugin.xcworkspace -scheme Plugin -destination generic/platform=iOS && cd ..","verify:web":"npm run build","prepublishOnly":"npm run build","verify:android":"cd android && ./gradlew clean build test && cd .."},"_npmUser":{"name":"dootix","email":"it@dootix.com"},"prettier":"@ionic/prettier-config","capacitor":{"ios":{"src":"ios"},"android":{"src":"android"}},"swiftlint":"@ionic/swiftlint-config","repository":{"url":"git+https://github.com/capacitor-community/photoviewer.git","type":"git"},"_npmVersion":"10.1.0","description":"PhotoViewer table images with fullscreen and sharing capabilities","directories":{},"_nodeVersion":"20.9.0","dependencies":{"jeep-photoviewer":"^1.2.3"},"eslintConfig":{"extends":"@ionic/eslint-config/recommended"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^7.11.0","rimraf":"^3.0.2","rollup":"^2.32.0","prettier":"~2.3.0","swiftlint":"^1.0.1","typescript":"~4.1.5","@capacitor/ios":"^6.0.0","@capacitor/core":"^6.0.0","@capacitor/docgen":"^0.0.17","@capacitor/android":"^6.0.0","@ionic/eslint-config":"^0.3.0","prettier-plugin-java":"~1.0.2","@ionic/prettier-config":"^1.0.1","@ionic/swiftlint-config":"^1.1.2"},"peerDependencies":{"@capacitor/core":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/photoviewer_3.3.0_1720597782556_0.08836533696082083","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2024-07-10T07:49:42.485Z","modified":"2024-11-27T10:40:33.428Z","3.3.0":"2024-07-10T07:49:42.773Z"},"bugs":{"url":"https://github.com/capacitor-community/photoviewer/issues"},"author":{"name":"Dootix","email":"it@dootix.com"},"license":"MIT","homepage":"https://github.com/capacitor-community/photoviewer#readme","keywords":["capacitor","plugin","native","photoviewer"],"repository":{"url":"git+https://github.com/capacitor-community/photoviewer.git","type":"git"},"description":"PhotoViewer table images with fullscreen and sharing capabilities","maintainers":[{"name":"dootix","email":"it@dootix.com"}],"readme":"<p align=\"center\"><br><img src=\"https://user-images.githubusercontent.com/236501/85893648-1c92e880-b7a8-11ea-926d-95355b8175c7.png\" width=\"128\" height=\"128\" /></p>\n<h3 align=\"center\">PHOTO VIEWER</h3>\n<p align=\"center\"><strong><code>https://github.com/dootixsa/photoviewer</code></strong></p>\n<br>\n<p align=\"center\" style=\"font-size:50px;color:red\"><strong>Capacitor 6 (experimental)</strong></p>\n<p align=\"center\" style=\"font-size:50px;color:red\"><strong>Disclaimer</strong></p>\n<p>We need this plugin for one of our apps. We are just applying the necessary changes to make it work with Capacitor 6 (see this https://github.com/capacitor-community/photoviewer/issues/56#issuecomment-1936686909). As soon as the original plugin supports Capacitor 6, this repository will be dropped. Please do not rely on it.\n</p>\n<br>\n<!-- Note from the Owner - Start -->\n<p align=\"center\" style=\"font-size:50px;color:red\"><strong>Note from the upstream Owner</strong></p>\n<!-- Note from the Owner - End -->\n<br>\n<!-- Message below Note from the Owner - Start -->\n<p align=\"left\" style=\"font-size:47px\">Start --></p>\n<br>\n<p align=\"left\">\nI have been dedicated to developing and maintaining this plugin for many years since the inception of Ionic Capacitor. Now, at 73+ years old, and with my MacBook Pro becoming obsolete for running Capacitor 6 for iOS, I have made the decision to cease maintenance of the plugin. If anyone wishes to take ownership of this plugin, they are welcome to do so.\n</p>\n<br>\n<p align=\"left\">\nIt has been a great honor to be part of this development journey alongside the developer community. I am grateful to see many of you following me on this path and incorporating the plugin into your applications. Your comments and suggestions have motivated me to continuously improve it.\n</p>\n<br>\n<p align=\"left\">\nI have made this decision due to several family-related troubles that require my full attention and time. Therefore, I will not be stepping back. Thank you to all of you for your support.\n</p>\n<br>\n<p align=\"left\" style=\"font-size:47px\">End <--</p>\n<!-- Message below Note from the Owner - End -->\n<br>\n<br>\n<p align=\"left\">\nCapacitor community plugin for Web and Native Photo Viewer allowing to open fullscreen </p>\n<p align=\"left\">\n- a selected picture from a grid of pictures with zoom-in and sharing features. </p>\n<p align=\"left\">\n- a single picture with zoom-in and sharing features.</p>\n<p align=\"left\">\nA picture can be acessed by image web url, base64 data or from internal device for iOS and Android.\n</p>\n<p align=\"left\">\n- iOS\n</p>\n<ul>\n<li><strong><code>file:///var/mobile/Media/DCIM/100APPLE/YOUR_IMAGE.JPG</code></strong></li>\n<li><strong><code>capacitor://localhost/_capacitor_file_/var/mobile/Containers/Data/Application/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/Documents/photo1.jpg</code></strong></li>\n</ul>\n<p align=\"left\">\n- Android\n</p>\n<ul>\n<li><strong><code>file:///sdcard/DCIM/YOUR_IMAGE.JPG</code></strong></li>\n<li><strong><code>file:///sdcard/Pictures/YOUR_IMAGE.JPG</code></strong></li>\n<li><strong><code>http://localhost/_capacitor_file_/storage/emulated/0/Pictures/JPEG_20221001_113835_7582877022250987909.jpg</code></strong></li>\n</ul>\n\n<p align=\"left\">\nOn iOS plugin, the creation of a movie from the pictures stored in the <strong>All Photos</strong> folder is now available.\n</p>\n\n<br>\n<p align=\"center\">\n  <img src=\"https://img.shields.io/maintenance/yes/2023?style=flat-square\" />\n  <a href=\"https://www.npmjs.com/package/@capacitor-community/photoviewer\"><img src=\"https://img.shields.io/npm/l/@capacitor-community/photoviewer?style=flat-square\" /></a>\n<br>\n  <a href=\"https://www.npmjs.com/package/@capacitor-community/photoviewer\"><img src=\"https://img.shields.io/npm/dw/@capacitor-community/photoviewer?style=flat-square\" /></a>\n  <a href=\"https://www.npmjs.com/package/@capacitor-community/photoviewer\"><img src=\"https://img.shields.io/npm/v/@capacitor-community/photoviewer?style=flat-square\" /></a>\n<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->\n<a href=\"#contributors-\"><img src=\"https://img.shields.io/badge/all%20contributors-8-orange?style=flat-square\" /></a>\n<!-- ALL-CONTRIBUTORS-BADGE:END -->\n</p>\n<br>\n\n## Maintainers\n\n| Maintainer        | GitHub                                    | Social |\n| ----------------- | ----------------------------------------- | ------ |\n| Quéau Jean Pierre | [jepiqueau](https://github.com/jepiqueau) |        |\n\n## CAPACITOR 6 (Master)\n\nFor more info on releases:\n\n - [info_releases](https://github.com/capacitor-community/photoviewer/blob/master/info_releases.md)\n\n - [changelog](https://github.com/capacitor-community/photoviewer/blob/main/CHANGELOG.md)\n\n - [issues](https://github.com/capacitor-community/photoviewer/issues)\n\n\n\n## Browser Support\n\nThe plugin follows the guidelines from the `Capacitor Team`,\n\n- [Capacitor Browser Support](https://capacitorjs.com/docs/v3/web#browser-support)\n\nmeaning that it will not work in IE11 without additional JavaScript transformations, e.g. with [Babel](https://babeljs.io/).\n\n## Installation\n\n```bash\nnpm install https://github.com/dootixsa/photoviewer\nnpx cap sync\n```\n\nSince version 3.0.4, modify the `capacitor.config.ts` to add the image location to save the image downloaded from an HTTP request to the internal disk.\n\n```ts\nconst config: CapacitorConfig = {\n  ...\n  plugins: {\n    PhotoViewer: {\n      iosImageLocation: 'Library/Images',\n      androidImageLocation: 'Files/Images',\n    }\n  }\n  ...\n};\n\nexport default config;\n\n\n```\n### iOS\n\n- in Xcode, open `Info.plist` and add a new Information Property like `Privacy - Photo Library Usage Description` and set a value to `We need to write photos`. This is required to have the `Share`of images and the `create Movie` working.\n\n### Android\n\n- on the `res` project folder open the `file_paths.xml` file and add\n\n```xml\n    <files-path name=\"files\" path=\".\"/>\n```\n\n- open the `build.gradle (Project:android)` and make sure that `kotlin` is declared\n\n```js\n...\nbuildscript {\n    ext.kotlin_version = '1.8.20'\n    dependencies {\n        ...\n        classpath 'com.android.tools.build:gradle:8.0.0'\n        classpath 'com.google.gms:google-services:4.3.15'\n        classpath \"org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version\"\n    }\n}\n...\n```\n\n- open the `build.gradle (Module: android.app)` and do the following\n\n    - after `apply plugin: 'com.android.application'` add\n        ```\n        apply plugin: 'kotlin-android'\n        apply plugin: 'kotlin-kapt'\n        ```\n\n    - in the `android` block add\n        ```\n        buildFeatures {\n            dataBinding = true\n        }\n        ```\n\n    - in the `repositories` block add\n        ```\n        maven { url 'https://jitpack.io' }\n        ```\n    - in the `dependencies` block add\n        ```\n        implementation \"androidx.core:core-ktx:1.10.0\"\n        implementation \"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version\"\n        ```\n\n- Now run `Sync Project with Gradle Files` and you are ready.\n\n### Web, PWA\n\nThe plugin works with the companion Stencil component `jeep-photoviewer`.\nIt is mandatory to install it\n\n```\nnpm install --save-dev jeep-photoviewer@latest\n```\n\n\n### Build your App\n\nWhen your app is ready\n\n```bash\nnpm run build\nnpx cap copy\nnpx cap copy web\nnpx cap open android   // Android\nnpx cap open ios       // iOS\nnpm run serve          // Web\n```\n\n## Supported methods\n\n| Name                        | Android | iOS | Electron | Web |\n| :-------------------------- | :------ | :-- | :------- | :-- |\n| echo                        |   ✅    |  ✅  |    ❌    |  ✅ |\n| show                        |   ✅    |  ✅  |    ❌    |  ✅ |\n| saveImageFromHttpToInternal |   ❌    |  ✅  |    ❌    |  ❌ |\n| getInternalImagePaths       |   ❌    |  ✅  |    ❌    |  ❌ |\n\n\n## Documentation\n\n[API_Documentation](https://github.com/capacitor-community/photoviewer/blob/master/docs/API.md)\n\n## Applications demonstrating the use of the plugin\n\n### Ionic/Angular\n\n- [angular-photoviewer-app](https://github.com/jepiqueau/angular-photoviewer-app)\n\n### Ionic/Vue\n\n- [vue-photoviewer-app](https://github.com/jepiqueau/vue-photoviewer-app)\n\n### React\n\n- [vite-react-photoviewer-app](https://github.com/jepiqueau/vite-react-photoviewer-app)\n\n## Usage\n\n- [In your Ionic/Vue App](https://github.com/capacitor-community/photoviewer/blob/master/docs/Ionic-Vue-Usage.md)\n\n- [In your Ionic/Angular App](https://github.com/capacitor-community/photoviewer/blob/master/docs/Ionic-Angular-Usage.md)\n\n\n\n### iOS and Android\n\n- In `Gallery` mode (Image Array with more than one Image):\n    - make a `tap` will select the image and go fullscreen\n    - In Fulscreen\n        - `tap` will hide the share and exit buttons and open the window for other gestures.\n        - `double tap` to zoom in and out\n        - `pinch` with your two fingers\n        - `tap` will show the share and exit buttons and leave the window for other gestures.\n        - `double tap` will hide the buttons and zoom in straightforward (iOS only)\n- In `One Image` mode (Image Array with one Image only):\n    - `pinch-zoom` and `pan` with your two fingers\n    - `double-tap` to zoom directly to the maximum zoom\n- You can pass customHeaders in the options object to let the plugin pass those headers to the http request for the image. For example:\n\n```ts\nPhotoViewer.show({\n  images: [\n    {\n      url: 'https://picsum.photos/id/237/200/300',\n      title: 'Title'\n    },\n    {\n      url: 'https://picsum.photos/id/238/200/300',\n      title: 'Title'\n    },\n  ],\n  options: {\n    customHeaders: {\n      accept: 'image/jpeg, image/png, image/gif, image/webp, image/svg+xml, image/*;q=0.8, */*;q=0.5',\n      cookie: 'session=foo;',\n    },\n  },\n  mode: 'slider'\n})\n```\n\n\n## Dependencies\n\nThe Android code is using `MikeOrtiz/TouchImageView` allowing for the zooming in picture (https://github.com/MikeOrtiz/TouchImageView)\n\nThe iOS code is using `SDWebImage` for http async image downloader (https://github.com/SDWebImage/SDWebImage) and `ISVImageScrollView` for the pinch-zoom and pan in picture (https://github.com/yuriiik/ISVImageScrollView)\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<p align=\"center\">\n  <a href=\"https://github.com/jepiqueau\" title=\"jepiqueau\"><img src=\"https://github.com/jepiqueau.png?size=100\" width=\"50\" height=\"50\" /></a>\n  <a href=\"https://github.com/ludufre\" title=\"ludufre\"><img src=\"https://github.com/ludufre.png?size=100\" width=\"50\" height=\"50\" /></a>\n  <a href=\"https://github.com/rdlabo\" title=\"rdlabo\"><img src=\"https://github.com/rdlabo.png?size=100\" width=\"50\" height=\"50\" /></a>\n  <a href=\"https://github.com/bozhidarc\" title=\"bozhidarc\"><img src=\"https://github.com/bozhidarc.png?size=100\" width=\"50\" height=\"50\" /></a>\n  <a href=\"https://github.com/adnbrownie\" title=\"adnbrownie\"><img src=\"https://github.com/adnbrownie.png?size=100\" width=\"50\" height=\"50\" /></a>\n  <a href=\"https://github.com/chiraganand\" title=\"chiraganand\"><img src=\"https://github.com/chiraganand.png?size=100\" width=\"50\" height=\"50\" /></a>\n  <a href=\"https://github.com/https://github.com/camilocalvo\" title=\"camilocalvo\"><img src=\"https://github.com/camilocalvo.png?size=100\" width=\"50\" height=\"50\" /></a>\n  <a href=\"https://github.com/shiv19\" title=\"shiv19\"><img src=\"https://github.com/shiv19.png?size=100\" width=\"50\" height=\"50\" /></a>\n</p>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md"}