### Install Capacitor PhotoViewer Plugin

Source: https://context7.com/context7/deepwiki_capacitor-community_photoviewer/llms.txt

Installs the @capacitor-community/photoviewer plugin and synchronizes native project files. This is the initial setup step for using the plugin.

```bash
npm install @capacitor-community/photoviewer
npx cap sync
```

--------------------------------

### Verify Plugin Installation via File System Check

Source: https://deepwiki.com/capacitor-community/photoviewer/2

These commands help verify that the plugin has been correctly installed and its files are present in the expected locations within your project's node_modules and platform directories. This is a manual check after running 'npm install' and 'npx cap sync'.

```bash
# Check if the plugin is installed in node_modules
ls node_modules/@capacitor-community/photoviewer
```

```bash
# Verify native code presence for iOS
ls ios/Pods/CapacitorCommunityPhotoviewer

# Verify native code presence for Android
ls android/capacitor-cordova-android-plugins/src/main/java/com/getcapacitor/community/media/photoviewer
```

--------------------------------

### Synchronize Capacitor Project with Native Code

Source: https://deepwiki.com/capacitor-community/photoviewer/2

After installing the plugin, run this command to copy the native code to the appropriate platform directories (iOS, Android). This step is crucial for the plugin to function correctly on native builds.

```bash
npx cap sync
```

--------------------------------

### Verify Capacitor Plugin Installation

Source: https://deepwiki.com/capacitor-community/photoviewer/2-getting-started

Verifies the installation of Capacitor plugins across different platforms. Individual verification commands are also available.

```bash
# Verify all platforms
npm run verify

# Or verify individually
npm run verify:ios      # iOS verification
npm run verify:android  # Android verification  
npm run verify:web      # Web verification
```

--------------------------------

### Install Capacitor PhotoViewer Plugin via npm

Source: https://deepwiki.com/capacitor-community/photoviewer/2

This command installs the @capacitor-community/photoviewer plugin and its runtime dependency jeep-photoviewer into your Capacitor project. Ensure you have npm or yarn installed and a Capacitor project initialized.

```bash
npm install @capacitor-community/photoviewer
```

--------------------------------

### Install Web Component for Photoviewer

Source: https://deepwiki.com/capacitor-community/photoviewer/2-getting-started

This command installs the `jeep-photoviewer` Stencil component as a development dependency for web/PWA implementations. The version is managed in the `package.json` file.

```bash
npm install --save-dev jeep-photoviewer@latest
```

--------------------------------

### Complete Build Verification Script for capacitor-community/photoviewer

Source: https://deepwiki.com/capacitor-community/photoviewer/8-development-guide

The main verification command in package.json that runs the verification scripts for all platforms (iOS, Android, and Web) to ensure successful builds before publishing or deploying.

```json
"verify": "npm run verify:ios && npm run verify:android && npm run verify:web"
```

--------------------------------

### HTML Setup for PhotoViewer Container

Source: https://deepwiki.com/capacitor-community/photoviewer/5-web-implementation

Provides the basic HTML structure required for the web implementation of the PhotoViewer. A container element with a specific ID is necessary for the plugin to render the viewer.

```html
<div id="photoviewer-container"></div>
```

--------------------------------

### Release Workflow Automation

Source: https://deepwiki.com/capacitor-community/photoviewer/8-development-guide

Utilizes `standard-version` for automated semantic versioning and changelog generation based on Conventional Commits. This command triggers the release process.

```bash
# Command to trigger the release process using standard-version
npm run release
```

--------------------------------

### Run Release Script

Source: https://deepwiki.com/capacitor-community/photoviewer/8-development-guide

Executes the standard-version tool to automate the release process. This involves analyzing commits, determining version bumps, updating package.json, generating CHANGELOG.md, and creating git tags. It follows Conventional Commits for version bumping logic.

```bash
npm run release
# Or for specific version:
npm run release -- --release-as 7.1.0
# Or for pre-release:
npm run release -- --prerelease alpha
```

--------------------------------

### iOS Verification Script for capacitor-community/photoviewer

Source: https://deepwiki.com/capacitor-community/photoviewer/8-development-guide

The iOS verification script defined in package.json. It navigates to the 'ios' directory, installs CocoaPods dependencies, and builds the plugin using xcodebuild for the iOS platform.

```json
"verify:ios": "cd ios && pod install && xcodebuild -workspace Plugin.xcworkspace -scheme Plugin -destination generic/platform=iOS && cd .."
```

--------------------------------

### Import PhotoViewer Plugin in TypeScript

Source: https://deepwiki.com/capacitor-community/photoviewer/2

This TypeScript import statement demonstrates how to bring the PhotoViewer plugin into your application code. Successful import indicates that the plugin's type definitions are accessible, typically verified after a successful installation and sync.

```typescript
import { PhotoViewer } from '@capacitor-community/photoviewer';
```

--------------------------------

### Install iOS Dependencies with CocoaPods

Source: https://deepwiki.com/capacitor-community/photoviewer/2-getting-started

Installs native iOS dependencies for the PhotoViewer plugin using CocoaPods. This is typically done after running `npx cap sync` or can be executed manually by navigating to the `ios` directory.

```bash
cd ios
pod install
```

--------------------------------

### Quality Checks and Git Push

Source: https://deepwiki.com/capacitor-community/photoviewer/8-development-guide

Commands to ensure code quality and push changes to the repository. 'npm run lint' and 'npm run verify' are used for quality checks. 'git status' checks the working directory, and 'git push --follow-tags origin main' pushes commits along with tags.

```bash
git status
npm run lint
npm run verify
git push --follow-tags origin main
```

--------------------------------

### Android Verification Script for capacitor-community/photoviewer

Source: https://deepwiki.com/capacitor-community/photoviewer/8-development-guide

The Android verification script defined in package.json. It navigates to the 'android' directory, cleans the Gradle build, and then builds and tests the Android plugin using Gradle.

```json
"verify:android": "cd android && ./gradlew clean build test && cd .."
```

--------------------------------

### Pre-publish Verification Script

Source: https://deepwiki.com/capacitor-community/photoviewer/8-development-guide

Specifies the 'prepublishOnly' npm script, which triggers a full build process, including documentation generation, TypeScript compilation, and Rollup bundling, before publishing the package. This ensures that only verified and built code is released to npm.

```json
"prepublishOnly": "npm run build"
```

--------------------------------

### Platform Verification Commands

Source: https://deepwiki.com/capacitor-community/photoviewer/8-development-guide

Lists npm commands for verifying the plugin's functionality across iOS, Android, and Web platforms. Each command performs specific build and compilation steps relevant to its platform, ensuring the plugin works as expected before deployment.

```shell
# iOS Verification
npm run verify:ios

# Android Verification
npm run verify:android

# Web Verification
npm run verify:web

# All Platforms Verification
npm run verify
```

--------------------------------

### Package Distribution Entry Points

Source: https://deepwiki.com/capacitor-community/photoviewer/8-development-guide

Specifies the different entry points for the distributed package. This includes CommonJS, ES Modules, TypeScript definitions, and UMD formats, catering to various environments like Node.js, modern browsers, and CDNs.

```json
{
  "main": "dist/plugin.cjs.js",
  "module": "dist/esm/index.js",
  "types": "dist/esm/index.d.ts",
  "unpkg": "dist/plugin.js"
}
```

--------------------------------

### JavaScript Dependency Management (npm)

Source: https://deepwiki.com/capacitor-community/photoviewer/8-development-guide

Manages JavaScript packages using npm. Includes runtime, peer, and development dependencies. The `package-lock.json` ensures reproducible builds by locking exact dependency versions.

```json
{
  "dependencies": {
    "jeep-photoviewer": "^1.2.3"
  },
  "peerDependencies": {
    "@capacitor/core": ">=7.0.0"
  },
  "devDependencies": {
    "typescript": ">=",
    "rollup": ">=",
    "rimraf": ">=",
    "@capacitor/android": ">=",
    "@capacitor/ios": ">=",
    "@capacitor/docgen": ">=",
    "eslint": ">=",
    "prettier": ">=",
    "swiftlint": ">=",
    "prettier-plugin-java": ">=",
    "@ionic/eslint-config": ">=",
    "@ionic/prettier-config": ">=",
    "@ionic/swiftlint-config": ">=",
    "standard-version": ">="
  }
}
```

--------------------------------

### Dependency Update Commands

Source: https://deepwiki.com/capacitor-community/photoviewer/8-development-guide

Provides commands for updating dependencies across different platforms. `npm update` for JavaScript, `pod update` for iOS, and manual version editing followed by Gradle sync for Android.

```bash
# Update JavaScript dependencies to latest compatible versions
npm update

# Update JavaScript dependencies to latest versions (may include breaking changes)
npm update --latest

# Update a specific JavaScript package to its latest version
npm install <package>@latest

# Update iOS dependencies
cd ios
pod update
cd ..

# Update Android dependencies: Edit version numbers in android/build.gradle and sync Gradle.
```

--------------------------------

### Build Script for capacitor-community/photoviewer

Source: https://deepwiki.com/capacitor-community/photoviewer/8-development-guide

The main build script defined in package.json for the capacitor-community/photoviewer plugin. It cleans the distribution directory, generates API documentation, compiles TypeScript to JavaScript, and bundles the JavaScript code using Rollup into multiple module formats.

```json
"build": "npm run clean && npm run docgen && tsc && rollup -c rollup.config.mjs"
```

--------------------------------

### Prettier Configuration for Code Formatting

Source: https://deepwiki.com/capacitor-community/photoviewer/8-development-guide

Sets up Prettier to automatically format code across multiple file types including TypeScript, JavaScript, HTML, CSS, and Java. It utilizes the Ionic preset with a Java plugin for consistent formatting. The configuration ensures code readability and adherence to style guides.

```json
"prettier": "@ionic/prettier-config"
```

--------------------------------

### iOS Dependency Management (CocoaPods)

Source: https://deepwiki.com/capacitor-community/photoviewer/8-development-guide

Defines iOS native dependencies using CocoaPods in the `ios/Podfile`. Includes platform configuration, core Capacitor pods, and native libraries like SDWebImage and ISVImageScrollView. A post-installation hook enforces a minimum iOS deployment target of 14.0.

```ruby
platform :ios, '14.0'

target 'App' do
  config.build_settings.each do |key, value|
    if key.include?('SWIFT_VERSION')
      config.build_settings[key] = "5.0"
    end
  end

  
  use_frameworks! :linkage => :static

  # Pods for App
  pod 'Capacitor'
  pod 'CapacitorCordova'

  pod 'SDWebImage', '~> 5.20.0'
  pod 'ISVImageScrollView', '~> 0.3'

  post_install do |installer|
    installer.pods_project.targets.each do |target|
      target.build_configurations.each do |config|
        config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '14.0'
      end
    end
  end
end
```

--------------------------------

### Android Dependency Management (Gradle)

Source: https://deepwiki.com/capacitor-community/photoviewer/8-development-guide

Manages Android dependencies and build configurations in `android/build.gradle`. It defines build variables, buildscript dependencies (Kotlin, AGP), applied plugins, repository configurations (Google, Maven Central, JitPack), and implementation/test dependencies including Glide and TouchImageView.

```gradle
buildscript {
    ext {
        junitVersion = "4.13.2"
        androidxAppCompatVersion = "1.7.0"
        androidxJunitVersion = "1.2.1"
        androidxEspressoCoreVersion = "3.6.1"
        kotlinVersion = "1.9.25"
        androidGradlePluginVersion = "8.8.1"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath "com.android.tools.build:gradle:" + androidGradlePluginVersion
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:" + kotlinVersion
    }
}

allprojects {
    repositories {
        google()
        mavenCentral()
        maven { url 'https://jitpack.io' } // For TouchImageView
    }
}

rootProject.allprojects {
    plugins.withId('com.android.library') {
        // Apply Android library plugin
    }
    plugins.withId('kotlin-android') {
        // Apply Kotlin Android plugin
    }
    plugins.withId('kotlin-parcelize') {
        // Apply Kotlin Parcelize plugin
    }
    plugins.withId('kotlin-kapt') {
        // Apply Kotlin Kapt plugin
    }
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib:" + kotlinVersion
    implementation "androidx.core:core-ktx:" + androidxCoreVersion
    implementation "androidx.appcompat:appcompat:" + androidxAppCompatVersion
    implementation "com.google.android.material:material:" + materialVersion
    implementation "androidx.constraintlayout:constraintlayout:" + constraintlayoutVersion
    implementation "androidx.recyclerview:recyclerview:" + recyclerviewVersion
    implementation "androidx.viewpager2:viewpager2:" + viewpager2Version
    implementation "androidx.fragment:fragment-ktx:" + fragmentKtxVersion

    implementation "com.github.bumptech.glide:glide:" + glideVersion
    kapt "com.github.bumptech.glide:compiler:" + glideVersion

    implementation "com.github.MikeOrtiz:TouchImageView:" + touchImageViewVersion // Example for JitPack

    testImplementation "junit:junit:" + junitVersion
    androidTestImplementation "androidx.test.ext:junit:" + androidxJunitVersion
    androidTestImplementation "androidx.test.espresso:espresso-core:" + androidxEspressoCoreVersion
}

```

--------------------------------

### SwiftLint Configuration for Swift Code Style

Source: https://deepwiki.com/capacitor-community/photoviewer/8-development-guide

Configures SwiftLint to enforce Swift code style rules for the iOS implementation. This ensures the Swift code adheres to best practices and project-specific style guidelines, improving maintainability and consistency.

```json
"swiftlint": "@ionic/swiftlint-config"
```

--------------------------------

### Integrated Lint and Format Workflow Scripts

Source: https://deepwiki.com/capacitor-community/photoviewer/8-development-guide

Defines npm scripts for the integrated code quality workflow. 'lint' runs ESLint, Prettier check, and SwiftLint, while 'fmt' performs auto-fixing for ESLint, Prettier, and SwiftLint. These scripts automate the process of maintaining code quality and formatting.

```json
"lint": "npm run eslint && npm run prettier -- --check && npm run swiftlint -- lint",
"fmt": "npm run eslint -- --fix && npm run prettier -- --write && npm run swiftlint -- --fix --format"
```

--------------------------------

### Show Method Input Interface (TypeScript)

Source: https://deepwiki.com/capacitor-community/photoviewer/3

Defines the 'capShowOptions' interface for the 'show' method, which is used to display the photo viewer. It includes an array of images, optional viewer configurations, viewing mode, and the starting image index.

```typescript
interface capShowOptions {
  images: Image[];
  options?: ViewerOptions;
  mode?: string;
  startFrom?: number;
}
```

--------------------------------

### Web Container Setup for Capacitor PhotoViewer

Source: https://context7.com/context7/deepwiki_capacitor-community_photoviewer/llms.txt

This snippet demonstrates how to set up an HTML container for the PhotoViewer plugin on the web platform. It shows how to use the default container ID 'photoviewer-container' or a custom ID like 'my-custom-viewer' by passing it in the `show` method options. Ensure the container element exists before calling `PhotoViewer.show()` to avoid errors.

```html
<!DOCTYPE html>
<html>
<head>
  <title>PhotoViewer Web Example</title>
</head>
<body>
  <!-- Default container ID -->
  <div id="photoviewer-container"></div>

  <!-- Or use custom container ID -->
  <div id="my-custom-viewer"></div>

  <script type="module">
    import { PhotoViewer } from '@capacitor-community/photoviewer';

    // Using custom container
    const showWithCustomContainer = async () => {
      await PhotoViewer.show({
        images: [{ url: 'https://example.com/photo.jpg' }],
        mode: 'one',
        options: {
          divid: 'my-custom-viewer'  // Specify custom container ID
        }
      });
    };

    // If container doesn't exist, show() will reject:
    // "Div id='photoviewer-container' not found"
  </script>
</body>
</html>
```

--------------------------------

### GET /api/photoviewer/echo

Source: https://deepwiki.com/capacitor-community/photoviewer/3-api-reference

A test method that echoes the input string back to the caller.

```APIDOC
## GET /api/photoviewer/echo

### Description
Test method that echoes input string. Useful for verifying plugin connectivity and basic functionality.

### Method
GET

### Endpoint
/api/photoviewer/echo

### Parameters
#### Query Parameters
- **value** (string) - Required - The string to be echoed back.

### Response
#### Success Response (200)
- **value** (string) - The echoed input string.

#### Response Example
```json
{
  "value": "Hello from echo!"
}
```
```

--------------------------------

### Capacitor Configuration for Internal Storage (TypeScript)

Source: https://context7.com/context7/deepwiki_capacitor-community_photoviewer/llms.txt

Example `capacitor.config.ts` file demonstrating how to configure the Photo Viewer plugin for internal storage. It specifies the `iosImageLocation` for iOS and `androidImageLocation` for Android, although the Android feature is noted as not yet implemented.

```typescript
// capacitor.config.ts
import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'MyApp',
  webDir: 'dist',
  plugins: {
    PhotoViewer: {
      iosImageLocation: 'Library/Images',      // iOS storage path
      androidImageLocation: 'Files/Images'     // Android storage path (feature not implemented)
    }
  }
};

export default config;
```

--------------------------------

### Android: Setup Notification Observer for PhotoViewer Exit

Source: https://deepwiki.com/capacitor-community/photoviewer/7-android-implementation

This Java code sets up a default center notification observer to listen for the 'photoviewerExit' event. When the event is triggered, it captures relevant data, removes all notifications, and notifies listeners on the Capacitor bridge. This is crucial for communicating viewer state changes back to the JavaScript side.

```java
NotificationCenter.defaultCenter()
    .addMethodForNotification(
        "photoviewerExit",
        new MyRunnable() {
            @Override
            public void run() {
                JSObject data = new JSObject();
                data.put("result", this.getInfo().get("result"));
                data.put("imageIndex", this.getInfo().get("imageIndex"));
                data.put("message", this.getInfo().get("message"));
                NotificationCenter.defaultCenter().removeAllNotifications();
                notifyListeners("jeepCapPhotoViewerExit", data);
                return;
            }
        }
    );
```

--------------------------------

### Capacitor Build and Deployment Commands

Source: https://deepwiki.com/capacitor-community/photoviewer/2-getting-started

This set of commands facilitates the build and deployment process for a Capacitor project. It includes commands for building web assets, copying them to native projects, opening the project in native IDEs (Android Studio, Xcode), and serving the web version for local testing.

```bash
# Build web assets
npm run build

# Copy to native projects
npx cap copy
npx cap copy web

# Open in platform IDEs
npx cap open android   # Android Studio
npx cap open ios       # Xcode

# Serve web version
npm run serve
```

--------------------------------

### Method Signature Mapping - TypeScript

Source: https://deepwiki.com/capacitor-community/photoviewer/4-architecture-overview

Showcases the Web implementation of the 'show' method in PhotoViewerWeb. This aligns with the TypeScript signature and handles the web-based presentation of the photo viewer.

```typescript
import { WebPlugin } from '@capacitor/core';

import type { PhotoViewerPlugin, CapShowOptions, CapShowResult } from './definitions';

export class PhotoViewerWeb extends WebPlugin implements PhotoViewerPlugin {
  async show(options: CapShowOptions): Promise<CapShowResult> {
    console.log('ECHO:', options);
    return Promise.resolve({ result: true });
  }
  // ... other methods ...
}
```

--------------------------------

### Get Internal Image Paths

Source: https://deepwiki.com/capacitor-community/photoviewer/3

Retrieves the paths of all images stored internally by the plugin.

```APIDOC
## GET /getInternalImagePaths

### Description
Retrieves a list of internal paths for all images previously saved using `saveImageFromHttpToInternal`.

### Method
GET

### Endpoint
`/getInternalImagePaths`

### Parameters
None

### Response
#### Success Response (200)
- **paths** (`string[]`) - An array of strings, where each string is an internal path to a saved image.

##### `capPaths`
Output interface for the `getInternalImagePaths()` method.
- **paths** (`string[]`) - An array of strings, where each string is an internal path to a saved image.

#### Response Example
```json
{
  "paths": [
    "file:///data/user/0/com.example.app/files/Pictures/my-image1.jpg",
    "file:///data/user/0/com.example.app/files/Pictures/my-image2.png"
  ]
}
```
```

--------------------------------

### GET /api/photoviewer/getInternalImagePaths

Source: https://deepwiki.com/capacitor-community/photoviewer/3-api-reference

Retrieves the file paths of all images stored internally by the plugin. (iOS only)

```APIDOC
## GET /api/photoviewer/getInternalImagePaths

### Description
Retrieve stored image paths from the device's internal storage. This functionality is exclusive to iOS.

### Method
GET

### Endpoint
/api/photoviewer/getInternalImagePaths

### Parameters
None

### Response
#### Success Response (200)
- **paths** (Array<string>) - An array of strings, where each string is the internal path to a stored image.

#### Response Example
```json
{
  "paths": [
    "/var/mobile/Containers/Data/Application/YOUR_APP_ID/Documents/image1.jpg",
    "/var/mobile/Containers/Data/Application/YOUR_APP_ID/Documents/image2.png"
  ]
}
```
```

--------------------------------

### Fragment Instance Creation with Factory Pattern (Kotlin)

Source: https://deepwiki.com/capacitor-community/photoviewer/7-android-implementation

Demonstrates the use of a static factory method `getInstance()` within `ScreenSlidePageFragment` to create fragment instances. It outlines the required `Bundle` arguments for initializing the fragment, including image data, mode, index, and various display options.

```kotlin
    // Example usage within the factory method (not the full implementation)
    val fragment = ScreenSlidePageFragment()
    val args = Bundle().apply {
        putParcelable(ARG_IMAGE, imageObject)
        putString(ARG_MODE, "slider")
        putInt(ARG_IMAGEINDEX, 0)
        putBoolean(ARG_SHARE, true)
        putBoolean(ARG_TITLE, false)
        putDouble(ARG_MAXZOOMSCALE, 5.0)
        putDouble(ARG_COMPRESSIONQUALITY, 0.8)
        putString(ARG_BACKGROUNDCOLOR, "#FFFFFF")
        // putString(ARG_CUSTOMHEADERS, serializedJSObject)
    }
    fragment.arguments = args
    return fragment
```

--------------------------------

### Method Signature Mapping - Swift

Source: https://deepwiki.com/capacitor-community/photoviewer/4-architecture-overview

Demonstrates the Swift implementation of the 'show' method within the PhotoViewerPlugin. This corresponds to the TypeScript signature and manages the iOS-specific presentation of the photo viewer.

```swift
import Foundation
import Capacitor

@objc(PhotoViewerPlugin) public class PhotoViewerPlugin: CAPPlugin {
    // ... other methods ...

    @objc func show(_ call: CAPPluginCall) {
        // iOS implementation for showing images
        // ...
    }

    // ... other methods ...
}
```

--------------------------------

### CI/CD Linting and Verification Workflow (npm)

Source: https://deepwiki.com/capacitor-community/photoviewer/8

This command demonstrates a typical CI/CD integration where the `lint` script is run to check code quality before the `verify` script, which focuses on platform builds and compilation. This ensures code quality is maintained in the deployment pipeline.

```bash
npm run lint && npm run verify
```

--------------------------------

### CocoaPods Manifest Lock File Validation Script

Source: https://deepwiki.com/capacitor-community/photoviewer/6

A shell script executed during the build process to ensure that the CocoaPods dependencies are in sync with the Podfile.lock. If not, it prompts the user to run 'pod install'.

```shell
diff "${PODS_PODFILE_DIR_PATH}/Podfile.lock" "${PODS_ROOT}/Manifest.lock" > /dev/null
if [ $? != 0 ] ; then
    echo "error: The sandbox is not in sync with the Podfile.lock. Run 'pod install'..."
    exit 1
fi
```

--------------------------------

### Platform-Specific Logic for Web vs. Native

Source: https://deepwiki.com/capacitor-community/photoviewer/5-web-implementation

Demonstrates how to implement platform-specific logic, particularly for handling storage operations that differ between web and native environments. Web browsers have different storage APIs than native platforms.

```typescript
if (Capacitor.getPlatform() === 'web') {
  // Use alternative storage strategy (IndexedDB, etc.)
} else {
  // Use saveImageFromHttpToInternal()
}
```

--------------------------------

### Run Auto-Formatting Before Committing (npm)

Source: https://deepwiki.com/capacitor-community/photoviewer/8

This command initiates the auto-formatting process for the project's codebase using the configured tools (ESLint, Prettier, SwiftLint). It's a recommended step before committing code to ensure consistent formatting.

```bash
npm run fmt
```

--------------------------------

### Configure PhotoViewer Slider Mode

Source: https://deepwiki.com/capacitor-community/photoviewer/4

Displays images in a horizontal carousel. Users can swipe between images, and it supports options like starting from a specific image, sharing, and movie creation (iOS only).

```javascript
PhotoViewer.show({
  images: [
    { url: 'https://example.com/img1.jpg', title: 'Image 1' },
    { url: 'https://example.com/img2.jpg', title: 'Image 2' },
    { url: 'https://example.com/img3.jpg', title: 'Image 3' }
  ],
  mode: 'slider',
  startFrom: 1,  // Start from second image
  options: {
    share: true,
    maxzoomscale: 3.0,
    movieoptions: {  // iOS only
      name: 'myMovie',
      imagetime: 3,
      mode: 'landscape',
      ratio: '16/9'
    }
  }
});
```

--------------------------------

### Core Methods Overview

Source: https://deepwiki.com/capacitor-community/photoviewer/3-api-reference

This section summarizes the core methods provided by the PhotoViewer plugin, including their purpose, platform support, and introduction version.

```APIDOC
## Core Methods

The plugin provides four methods with distinct purposes. Detailed documentation for each method is available in Plugin Methods.

Method| Purpose| Platform Support| Since  
---|---|---|---  
`echo()`| Test method that echoes input string| Web, iOS, Android| 0.0.1  
`show()`| Display photo viewer with images| Web, iOS, Android| 0.0.1  
`saveImageFromHttpToInternal()`| Download and store image locally| iOS only| 3.0.4  
`getInternalImagePaths()`| Retrieve stored image paths| iOS only| 3.0.4  
```

--------------------------------

### Display Slider Carousel

Source: https://context7.com/context7/deepwiki_capacitor-community_photoviewer/llms.txt

Presents images in a slider carousel format, allowing users to swipe through them. Supports starting from a specific image and options for titles, sharing, zoom scale, and transition effects.

```typescript
const showSlider = async () => {
  try {
    const result = await PhotoViewer.show({
      images: [
        { url: 'https://example.com/slide1.jpg', title: 'Slide 1' },
        { url: 'https://example.com/slide2.jpg', title: 'Slide 2' },
        { url: 'https://example.com/slide3.jpg', title: 'Slide 3' }
      ],
      mode: 'slider',
      startFrom: 1,  // Start at second image (0-indexed)
      options: {
        title: true,
        share: true,
        maxzoomscale: 5.0,
        transformer: 'zoom'  // Android only: 'zoom', 'depth', or 'none'
      }
    });

    console.log('Slider closed at index:', result.imageIndex);
  } catch (error) {
    console.error('Slider error:', error);
  }
};
```

--------------------------------

### Method Signature Mapping - Java

Source: https://deepwiki.com/capacitor-community/photoviewer/4-architecture-overview

Illustrates the Java implementation of the 'show' method in PhotoViewerPlugin. This maps to the TypeScript signature and handles the Android-specific logic for displaying images.

```java
public class PhotoViewerPlugin extends Plugin {
    // ... other methods ...

    @PluginMethod
    public void show(PluginCall call) {
        // Android implementation for showing images
        // ...
    }

    // ... other methods ...
}
```

--------------------------------

### Project-Level Gradle Configuration for Kotlin

Source: https://deepwiki.com/capacitor-community/photoviewer/2-getting-started

This Gradle configuration snippet is added to the project-level `build.gradle` file to enable Kotlin support. It declares the Kotlin version and includes necessary Kotlin and Google Services classpath dependencies.

```gradle
buildscript {
    ext.kotlin_version = '1.9.25'
    dependencies {
        classpath 'com.android.tools.build:gradle:8.8.1'
        classpath 'com.google.gms:google-services:4.4.2'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}
```

--------------------------------

### Module-Level Gradle Configuration for Android App

Source: https://deepwiki.com/capacitor-community/photoviewer/2-getting-started

This section details essential configurations for the `build.gradle` file of an Android application module. It includes applying necessary plugins, enabling build features like data binding, defining repositories, and adding core Kotlin and AndroidX dependencies.

```gradle
apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-kapt'
```

```gradle
android {
    buildFeatures {
        dataBinding = true
    }
}
```

```gradle
repositories {
    maven { url 'https://jitpack.io' }
}
```

```gradle
dependencies {
    implementation "androidx.core:core-ktx:1.15.0"
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
}
```

--------------------------------

### Initiate Fullscreen Touch View (Kotlin)

Source: https://deepwiki.com/capacitor-community/photoviewer/7-android-implementation

The `showTouchView()` function creates and displays a `TouchViewFragment` as a fullscreen dialog. It initializes the `TouchViewFragment` with the current fragment as a listener, sets the dialog style, and passes the image URL and background color to the new fragment.

```kotlin
private fun showTouchView() {
    val touchViewFragment = TouchViewFragment(this)
    touchViewFragment.setStyle(DialogFragment.STYLE_NORMAL, R.style.Dialog_FullScreen)
    image.url?.let { touchViewFragment.setUrl(it) }
    backgroundColor.let { touchViewFragment.setBackgroundColor(it) }
    activity?.let { touchViewFragment.show(it.supportFragmentManager, "touchview") }
}
```

--------------------------------

### Show Method

Source: https://deepwiki.com/capacitor-community/photoviewer/3

Displays the photo viewer with a specified array of images and configuration options.

```APIDOC
## POST /show

### Description
Displays the photo viewer with an array of images and optional viewer configurations.

### Method
POST

### Endpoint
`/show`

### Parameters
#### Request Body
- **options** (`capShowOptions`) - Required - Options for displaying the photo viewer.

##### `capShowOptions`
Primary input interface for the `show()` method.
- **images** (`Image[]`) - Required - Array of images to display.
- **options** (`ViewerOptions`) - Optional - Viewer configuration settings.
- **mode** (`string`) - Optional - Viewing mode: `"gallery"`, `"slider"`, or `"one"`. Default: `"gallery"`.
- **startFrom** (`number`) - Optional - Initial image index for `"slider"` and `"one"` modes. Default: `0`.

**Mode Values:**
  * `"gallery"`: Grid view with fullscreen expansion
  * `"slider"`: Carousel/swipeable view
  * `"one"`: Single image view

### Request Example
```json
{
  "images": [
    {
      "url": "https://example.com/image1.jpg"
    },
    {
      "url": "https://example.com/image2.png"
    }
  ],
  "options": {
    "title": "My Images"
  },
  "mode": "slider",
  "startFrom": 1
}
```

### Response
#### Success Response (200)
- **result** (`boolean`) - `true` if viewer closed successfully, `false` on error.
- **message** (`string`) - Status or error message.
- **imageIndex** (`number`) - Index of the last displayed image when viewer was closed.

##### `capShowResult`
Output interface for the `show()` method.
- **result** (`boolean`) - `true` if viewer closed successfully, `false` on error.
- **message** (`string`) - Status or error message.
- **imageIndex** (`number`) - Index of the last displayed image when viewer was closed.

#### Response Example
```json
{
  "result": true,
  "message": "Viewer closed",
  "imageIndex": 0
}
```
```

--------------------------------

### Android Build Configuration (build.gradle)

Source: https://deepwiki.com/capacitor-community/photoviewer/7-android-implementation

Specifies essential build configurations for an Android library module. This includes namespace, compile, minimum, and target SDK versions, as well as Java and Kotlin versions.

```gradle
namespace: com.getcapacitor.community.media.photoviewer
Compile SDK: 35
Min SDK: 23
Target SDK: 35
Java Version: 21
Kotlin Version: 1.9.25
```

--------------------------------

### Detect File System Image URLs (Java)

Source: https://deepwiki.com/capacitor-community/photoviewer/7-android-implementation

This Java code checks if any image URLs in a given array require file system access. It specifically looks for URLs starting with 'file:' or containing '_capacitor_file_'. If such URLs are found, it indicates a need for file system permissions.

```Java
boolean needsFileAccess = false;
for (String url : images) {
    if (url.startsWith("file:") || url.contains("_capacitor_file_")) {
        needsFileAccess = true;
        break;
    }
}
if (needsFileAccess) {
    // Request permissions if required and not granted
    if (!hasPermission(Manifest.permission.READ_EXTERNAL_STORAGE)) { // Simplified check for example
        await requestPermissions(new String[]{Manifest.permission.READ_EXTERNAL_STORAGE}, "imagesPermissionsCallback");
        return;
    }
}
```

--------------------------------

### Display Local Images on Android with PhotoViewer

Source: https://context7.com/context7/deepwiki_capacitor-community_photoviewer/llms.txt

This TypeScript function shows how to display local images on Android using the PhotoViewer plugin. It highlights that Android handles file access permissions automatically for local files, simplifying the integration. The example includes paths for both direct local storage and Capacitor's internal file serving.

```typescript
const showLocalImagesAndroid = async () => {
  try {
    await PhotoViewer.show({
      images: [
        { url: 'file:///storage/emulated/0/DCIM/Camera/IMG_001.jpg' },
        { url: 'http://localhost/_capacitor_file_/storage/emulated/0/Pictures/photo.jpg' }
      ],
      mode: 'slider'
    });

    // Plugin automatically checks and requests:
    // - READ_MEDIA_IMAGES on Android 13+ (API 33+)
    // - READ_EXTERNAL_STORAGE on Android 10-12 (API 29-32)
    // - No permission required on Android 9 and below
  } catch (error) {
    console.error('Failed to show images:', error);
  }
};
```

--------------------------------

### Multi-Platform Architecture - TypeScript

Source: https://deepwiki.com/capacitor-community/photoviewer/1-overview

Illustrates the plugin's multi-platform architecture using Capacitor's abstraction. This code snippet shows how the main plugin class routes calls to platform-specific implementations based on the runtime environment.

```typescript
import { registerPlugin } from '@capacitor/core';

import type { PhotoViewerPlugin } from './definitions';

const PhotoViewer = registerPlugin<PhotoViewerPlugin>('PhotoViewer');

export * from './definitions';
export { PhotoViewer };

```

--------------------------------

### Platform Detection and Conditional Feature Usage in Capacitor

Source: https://context7.com/context7/deepwiki_capacitor-community_photoviewer/llms.txt

This TypeScript code illustrates how to detect the current platform (e.g., iOS, Android, Web) using Capacitor's core utilities. It defines available features based on the platform, such as saving images from HTTP to internal storage exclusively on iOS. The example then shows conditional execution of features based on these platform checks, including a fallback warning for unsupported platforms.

```typescript
import { Capacitor } from '@capacitor/core';

const platformAwareFeatures = async () => {
  const platform = Capacitor.getPlatform();

  // Check feature availability
  const features = {
    show: true,                                    // All platforms
    echo: true,                                    // All platforms
    saveImageFromHttpToInternal: platform === 'ios',  // iOS only
    getInternalImagePaths: platform === 'ios',        // iOS only
    movieCreation: platform === 'ios'                 // iOS only
  };

  console.log('Platform:', platform);
  console.log('Available features:', features);

  // Conditional feature usage
  if (features.saveImageFromHttpToInternal) {
    await PhotoViewer.saveImageFromHttpToInternal({
      url: 'https://example.com/photo.jpg',
      filename: 'photo'
    });
  } else {
    console.warn('Image saving not available on', platform);
    // Implement alternative storage (IndexedDB, Cache API, etc.)
  }
};
```

--------------------------------

### PhotoViewerPlugin API Reference

Source: https://deepwiki.com/capacitor-community/photoviewer/1-overview

This section outlines the core methods provided by the PhotoViewerPlugin interface for displaying images.

```APIDOC
## PhotoViewerPlugin Interface

The plugin exposes its functionality through the `PhotoViewerPlugin` interface, which defines the following core methods:

### Method: `echo`

**Description:** A simple echo method to test plugin functionality.

**Method:** GET

**Endpoint:** `/echo` (Internal)

**Parameters:**

*   **`value`** (string) - Required - The string to be echoed back.

**Request Example:**

```json
{
  "value": "hello"
}
```

**Response:**

*   **Success Response (200):**
    *   **`value`** (string) - The echoed string.

**Response Example:**

```json
{
  "value": "hello"
}
```

### Method: `show`

**Description:** Displays a single image or a gallery of images with interactive features like zoom, pan, and sharing.

**Method:** POST

**Endpoint:** `/show` (Internal)

**Parameters:**

*   **`options`** (object) - Required - Configuration options for displaying the photos.
    *   **`images`** (array of strings) - Required - An array of image URLs, base64 data URIs, or local file paths.
    *   **`mode`** (string) - Optional - The viewing mode ('one', 'gallery', 'slider'). Defaults to 'one'.
    *   **`options`** (object) - Optional - Platform-specific options.
        *   **`android`** (object) - Android-specific options.
        *   **`ios`** (object) - iOS-specific options.

**Request Example:**

```json
{
  "images": [
    "https://example.com/image1.jpg",
    "data:image/png;base64,iVBORw0KGgo...",
    "/path/to/local/image.png"
  ],
  "mode": "slider"
}
```

**Response:**

*   **Success Response (200):**
    *   **`message`** (string) - A success message indicating the photo viewer was shown.

**Response Example:**

```json
{
  "message": "Photo viewer shown successfully."
}
```

### Method: `saveImageFromHttpToInternal`

**Description:** Saves an image from a remote HTTP/HTTPS URL to the app's internal storage (iOS only).

**Method:** POST

**Endpoint:** `/saveImageFromHttpToInternal` (Internal)

**Parameters:**

*   **`url`** (string) - Required - The URL of the image to save.

**Request Example:**

```json
{
  "url": "https://example.com/image_to_save.jpg"
}
```

**Response:**

*   **Success Response (200):**
    *   **`path`** (string) - The internal path where the image was saved.

**Response Example:**

```json
{
  "path": "/private/var/mobile/Containers/Data/Application/.../Documents/image_to_save.jpg"
}
```

### Method: `getInternalImagePaths`

**Description:** Retrieves a list of image paths stored in the app's internal storage (iOS only).

**Method:** GET

**Endpoint:** `/getInternalImagePaths` (Internal)

**Parameters:** None

**Request Example:**

```json
{}
```

**Response:**

*   **Success Response (200):**
    *   **`paths`** (array of strings) - An array of internal image paths.

**Response Example:**

```json
{
  "paths": [
    "/private/var/mobile/Containers/Data/Application/.../Documents/image1.jpg",
    "/private/var/mobile/Containers/Data/Application/.../Documents/image2.png"
  ]
}
```


```

--------------------------------

### ImageFragment Configuration Options (Kotlin)

Source: https://deepwiki.com/capacitor-community/photoviewer/7-android-implementation

This Kotlin code illustrates how configuration options are set for the ImageFragment. The `setOptions` method accepts a JSObject and applies various settings like share button visibility, zoom levels, compression quality, background color, and custom HTTP headers for image loading.

```Kotlin
fun setOptions(options: JSObject) {
    this.share = options.getBool("share", true)
    this.maxZoomScale = options.getDouble("maxzoomscale", 3.0)
    this.compressionQuality = options.getDouble("compressionquality", 0.8)
    this.backgroundColor = Color.parseColor(options.getString("backgroundcolor", "black"))
    this.customHeaders = options.getJSObject("customHeaders") ?: JSObject()
}
```

--------------------------------

### Xcode Framework Search Paths Configuration

Source: https://deepwiki.com/capacitor-community/photoviewer/6

Specifies the directories where Xcode should look for framework files during the build process. This includes built products and paths injected by CocoaPods.

```shell
FRAMEWORK_SEARCH_PATHS = (
    "${BUILT_PRODUCTS_DIR}/Capacitor",
    "${BUILT_PRODUCTS_DIR}/CapacitorCordova",
);
```

--------------------------------

### Viewing Modes - TypeScript Interface

Source: https://deepwiki.com/capacitor-community/photoviewer/1-overview

Defines the 'capShowOptions' interface, which specifies parameters for the 'show' method, including image sources, captions, platform-specific configurations, and viewing modes ('one', 'gallery', 'slider').

```typescript
export interface capShowOptions {
  url?: string;
  images?: string[];
  caption?: string;
  android:
    {
      resolution?: string;
      maxImages?: number;
    };
  ios:
    {
      preserveInitialAspectRatio?: boolean;
      appendImageToPath?: boolean;
    };
  mode?: "one" | "gallery" | "slider";
  closeButtonCaption?: string;
  shareCaption?: string;
  contentType?: string;
  headers?: { [key: string]: string };
  androidBrowserOptions?: {
    url?: string;
    text?: string;
  };
  iosBrowserOptions?: {
    url?: string;
    text?: string;
  };
}

```

--------------------------------

### Capacitor Photoviewer Plugin Methods

Source: https://deepwiki.com/capacitor-community/photoviewer/3-api-reference

This snippet lists the core methods exposed by the Capacitor Photoviewer plugin. It includes the 'echo' method for testing, the primary 'show' method for displaying images, and iOS-specific methods for managing local image storage. All methods are designed to return promises and adhere to standard Capacitor plugin patterns.

```typescript
/**
 * Test method that echoes input string
 */
echo(options: { value: string }): Promise<{ value: string }>;

/**
 * Display photo viewer with images
 */
show(options: ViewerOptions): Promise<void>;

/**
 * Download and store image locally (iOS only)
 */
saveImageFromHttpToInternal(options: { url: string }): Promise<{ path: string }>;

/**
 * Retrieve stored image paths (iOS only)
 */
getInternalImagePaths(): Promise<{ paths: string[] }>;

```

--------------------------------

### npm Scripts for Prettier Formatting

Source: https://deepwiki.com/capacitor-community/photoviewer/8

npm scripts to execute Prettier for checking and applying code formatting. '--check' verifies compliance without modifying files, while '--write' formats and saves changes.

```bash
npm run prettier -- --check
npm run prettier -- --write
```

--------------------------------

### Run SwiftLint for Code Quality Checks (npm)

Source: https://deepwiki.com/capacitor-community/photoviewer/8

This command executes SwiftLint in check mode to verify Swift code quality against defined rules. It's part of the npm script workflow for ensuring code compliance. The command `npm run swiftlint -- lint` triggers this check.

```bash
npm run swiftlint -- lint
```

--------------------------------

### iOS Podfile Configuration for Capacitor PhotoViewer

Source: https://deepwiki.com/capacitor-community/photoviewer/6-ios-implementation

This snippet shows the `Podfile` configuration for the iOS implementation of the Capacitor PhotoViewer plugin. It specifies the minimum deployment target and lists the required CocoaPods dependencies, including SDWebImage for image handling and ISVImageScrollView for gesture support.

```ruby
platform :ios, '14.0'

target 'Plugin' do
  capacitor_pods
  pod 'SDWebImage', '~> 5.20.0'
  pod 'ISVImageScrollView', '~> 0.3'
end
```

--------------------------------

### Platform Verification Script (npm)

Source: https://deepwiki.com/capacitor-community/photoviewer/8

This npm script executes platform-specific verification processes for iOS, Android, and web. It's a crucial part of the CI/CD pipeline, ensuring that each platform builds and compiles correctly.

```bash
npm run verify:ios && npm run verify:android && npm run verify:web
```