Build & Distribute

This page covers the full pipeline: building the bundle, creating the plugin manifest, hosting it, and installing it inside AN Player.

1. Build the Bundle

From your plugin project directory:

npm run build
# or directly:
npx ncc build ./src/main.ts -m -o ./dist/

After a successful build, dist/index.js contains your entire plugin as a single minified JavaScript file.

2. Create the Plugin Manifest

AN Player installs plugins from a plugin.json manifest. Create this file in your project root (or a dedicated dist/ folder you plan to host):

{
  "id": "@xeinebiu/mediavault",
  "name": "MediaVault",
  "version": 1,
  "versionName": "1.0.0",
  "targetVersion": "2.0.0",
  "description": "Browse and play your local media library over the network.",
  "configUrl": "",
  "updateUrl": "https://yourserver/plugin.json",
  "iconUrl": "",
  "config": "{\"serverUrl\":\"https://192.168.1.100:3000\"}",
  "script": "<contents of dist/index.js>"
}

Field Reference

Field	Description
id	Unique plugin identifier (ALL_CAPS by convention)
name	Human-readable name shown in the Plugins screen
version	Integer version (increment on every update)
versionName	Human-readable version string
targetVersion	Minimum version of the AN Player plugin engine required (2.0.0)
description	Short description shown in the Plugins screen
configUrl	URL to a web page (or raw HTML) for custom plugin configuration (optional)
updateUrl	URL to a plugin manifest file (plugin.json) used for update checks
iconUrl	URL to an icon (optional)
config	A string containing plugin-specific configuration (e.g., API keys, account tokens, or custom settings). The format is entirely up to the plugin developer (it could be JSON, a simple token, or any other string-serializable data).
script	The full contents of dist/index.js

Embed the Script

The script field must contain the contents of dist/index.js, not a path to it.

From a plugin directory, compile the root manifest with:

node ../scripts/compile-plugin-manifest.mjs

From node/plugins, compile every built plugin manifest at once with:

node ./scripts/compile-plugin-manifest.mjs --all

3. Host the Manifest

AN Player needs to download plugin.json over HTTP for installation and updates.

Alternatively, you can manually install the plugin by opening the plugin.json file directly from your device's storage. AN Player supports both remote URL installation and local file installation.

4. Install in AN Player

1. Open AN Player on your Android device
2. Navigate to Plugins Screen
3. Tap the add plugin button (or the URL input field)
4. Paste your manifest URL: https://anplayer.example.io/plugin.json
5. Tap Install / Confirm

AN Player downloads the manifest, stores the script, and the plugin is immediately available on the Discover screen.

5. Update the Plugin

When you release a new version:

1. Increment version (integer) in your manifest
2. Update versionName string
3. Rebuild and re-upload plugin.json to the same URL

AN Player periodically fetches the manifest from updateUrl. It compares the version field in the remote manifest with the currently installed version. If the remote version is higher, AN Player notifies the user that an update is available.

6. Web-based Configuration

For complex plugins that require more than a simple string, AN Player can open a web page to handle configuration. This is controlled via the configUrl field in your plugin.json.

How it Works

1. configUrl Content: If the string starts with <, AN Player treats it as raw HTML and loads it directly in an embedded WebView. Otherwise, it treats it as a URL and navigates to it.
2. The anPlayer Bridge: AN Player injects a global anPlayer object into the page. Your JavaScript code uses this object to communicate with the app.

The anPlayer Interface

Method	Description
anPlayer.getConfiguration()	Returns the current configuration string.
anPlayer.setConfiguration(string)	Saves a new configuration string to the app.
anPlayer.finish()	Closes the configuration web view.

Example Implementation

Create a simple HTML page (e.g., config.html) to manage your plugin settings:

<!DOCTYPE html>
<html>
<head>
    <title>Plugin Settings</title>
    <style>
        body { font-family: sans-serif; padding: 20px; background: #121212; color: white; }
        input { width: 100%; padding: 10px; margin: 10px 0; background: #333; color: white; border: 1px solid #444; }
        button { padding: 10px 20px; background: #007bff; color: white; border: none; cursor: pointer; }
    </style>
</head>
<body>
    <h2>MediaVault Settings</h2>
    <label>Server URL:</label>
    <input type="text" id="serverUrl" placeholder="https://192.168.1.100:3000">
    <button onclick="save()">Save Settings</button>

    <script>
        // Load existing config on startup
        window.onload = () => {
            // The format is up to you. Here we assume JSON for this example.
            const currentConfig = JSON.parse(anPlayer.getConfiguration() || '{}');
            document.getElementById('serverUrl').value = currentConfig.serverUrl || '';
        };

        function save() {
            const config = {
                serverUrl: document.getElementById('serverUrl').value
            };
            // Save stringified data to AN Player
            anPlayer.setConfiguration(JSON.stringify(config));
            // Close the view
            anPlayer.finish();
        }
    </script>
</body>
</html>

To use this, host the config.html file and set the configUrl in your plugin.json:

{
  "id": "@xeinebiu/mediavault",
  ...
  "configUrl": "https://yourserver/config.html"
}

7. Deep Link Installation

AN Player supports a custom URI scheme anplayer:// that allows users to install plugins and set initial configuration with a single click from a browser or another app.

Scheme Format

anplayer://install?downloadUrl=<manifest-url>&config=<initial-config-json>

Parameter	Description
downloadUrl	The URL to your plugin.json manifest.
config	(Optional) A URL-encoded JSON string to use as the initial configuration.

Example:anplayer://install?downloadUrl=http%3A%2F%2Fexample.io%2Fplugin.json&config=%7B%22host%22%3A%22vault.example.io%22%7B

8. Plugin Bundles

If you have multiple plugins (e.g., a "Core" bundle), you can create a Bundle File to install all of them at once.

Bundle File Format

A bundle is a plain text file that starts with the magic string bundle followed by a list of manifest URLs (one per line).

Example my-plugins.txt:

bundle
https://example.io/plugin-1.json
https://example.io/plugin-2.json

Installing a Bundle

Users can install a bundle just like a single plugin by pasting the URL to the .txt file in the Plugins Screen. AN Player will detect the bundle prefix and install every plugin listed in the file.

Summary

Step	Command / Action
Build	npm run build
Package	node ../scripts/compile-plugin-manifest.mjs
Host	Python server, nginx, GitHub Gist, static host
Install	Plugins Screen → add URL → paste manifest URL
Update	Increment version, rebuild, re-upload