This PR significantly improves the "Add external plugins" functionality in the Clappr demo site by implementing a comprehensive plugin management system that works across both the main version and plain HTML5 version.

Key Changes & Features

Complete Plugin Management System: Added a sophisticated PluginManager class to handle plugin selection, custom URL adding, and UI display.

Enhanced User Interface: Replaced the simple text input with an organized, multi-select dropdown and a visual display of all active plugins (categorized by "CDN" or "Custom").

Critical Bug Fix: Solved a long-standing bug where clicking "Run" multiple times would create new, stacked player instances instead of destroying the old one. The player lifecycle is now correctly managed.

Verified Plugin List: The dropdown is curated with a list of official and maintained plugins that are confirmed compatible with the @latest version of Clappr.

Technical Improvements

Plugin Selection

Organized dropdown with official plugins.

<div id="external-js-panel" class="plugin-system">
        <h5>Add external plugins:</h5>

        <!-- Plugin Selection Dropdown -->
        <div class="form-group">
          <label for="pluginSelector"><strong>Select plugins:</strong></label>
          <select name="pluginSelector" id="pluginSelector" multiple class="form-control plugin-selector">
            <!-- Available plugins -->
            <optgroup label="Official Clapper Plugins (CDN)">
              <option value="https://cdn.jsdelivr.net/npm/@clappr/stats-plugin@latest/dist/clappr-stats.min.js">
                @clappr/Stats (Official playback analytics)</option>
              <!-- More official plugins... -->
            </optgroup>
          </select>

Robust Asynchronous Loading

The load function was enhanced to correctly handle asynchronous script loading. It waits for all selected plugins to either load or fail before executing the player code, using a proper counter.

var load = function (fn) {
  if (window.clappr.externals.length > 0) {
    let loadedCount = 0;
    const totalToLoad = window.clappr.externals.length;

    console.log(`Loading ${totalToLoad} plugin(s)...`);

    window.clappr.externals.forEach(function (url) {
      var script = document.createElement('script');
      script.setAttribute("type", "text/javascript");
      script.setAttribute("src", url);

      script.onload = function () {
        loadedCount++;
        console.log(`Loaded: ${url} (${loadedCount}/${totalToLoad})`);
        if (loadedCount === totalToLoad) {
          console.log('All plugins loaded successfully.');
          fn();
        }
      };

      script.onerror = function () { 
        loadedCount++; 
        alert('Could not load plugin: ' + url);
        console.error(`Failed to load: ${url} (${loadedCount}/${totalToLoad})`);
        if (loadedCount === totalToLoad) {
          console.log('Attempting to run player despite plugin error.');
          fn();
        }
      };

      document.body.appendChild(script);
    });
  } else {
    fn();
  }
}

Graceful Error Handling

Added a try...catch block to the run function. This prevents incompatible plugins or user typos in the editor from crashing the entire page. If an error occurs, an alert is shown and the default player is restored.

load(function () {
  try {
    console.log('Parsing and executing player code');
    eval(code);
  } catch (error) {
    // If there was an error
    alert('An error occurred while executing your code. It may be a typo or an incompatible plugin.\n\nError: ' + error.message);

    // Try to recreate the default player so there isn't a gap
    player = new Clappr.Player({
      source: 'http.://clappr.io/highline.mp4',
      parentId: '#player-wrapper'
    });
  }
});

Files Modified

• index.html
• index.plainhtml5.html
• style.css

Testing

✅ Official plugins (@clappr/stats) load correctly and UI appears when configured.
✅ Incompatible plugins (like old level-selector) are caught by the try...catch block and display an alert.
✅ Custom plugin URLs work, with validation for duplicates and format.
✅ onerror handler correctly catches broken/invalid plugin URLs.
✅ Bug Fix Verified: Clicking "Run" multiple times (with or without plugins) correctly destroys the old player and creates only one new instance.
✅ Player state is correctly reset (e.g., stats logs stop) when plugins are removed and "Run" is clicked.

Before & After

Before: Simple text input for plugin URLs with basic tag display
After: Comprehensive plugin management system with organized selection, visual feedback, and robust error handling

This enhancement makes the Clappr demo site much more approachable for users wanting to experiment with plugins while maintaining the flexibility for advanced customization.