silvermine · judicaelandria · Oct 10, 2025 · Oct 31, 2025
diff --git a/README.md b/README.md
@@ -24,6 +24,21 @@ for casting to external devices. This plugin bridges that gap by:
    * **Future-Proofing**: Built with modern web standards and TypeScript for
      maintainability
 
+## Build Process
+
+The plugin includes a comprehensive build process that handles both code and assets:
+
+### Building the Plugin
+
+```bash
+npm run build
+```
+
+This command:
+
+1. **Compiles TypeScript**: Builds the source code using Vite
+2. **Generates Bundles**: Creates both UMD and ESM versions
+3. **Copies Assets**: Automatically copies icons from `src/images/` to `dist/images/`
 
 ## License
 

diff --git a/examples/README.md b/examples/README.md
@@ -0,0 +1,109 @@
+# Remote Playback Examples
+
+This directory contains test examples for the Video.js Remote Playback plugin.
+
+## Test Files
+
+### 🎯 `test-remote-playback.html`
+**Comprehensive test for both AirPlay and Chromecast**
+- Tests both AirPlay and Chromecast functionality
+- Shows device compatibility information
+- Displays debug information
+- Visual status indicators
+- Comprehensive event logging
+
+### 🍎 `test-airplay.html`
+**AirPlay-specific test**
+- Focuses on AirPlay functionality
+- Tests WebKit AirPlay API integration
+- Shows button behavior and state changes
+
+### 📺 `test-chromecast.html`
+**Chromecast-specific test**
+- Focuses on Chromecast functionality
+- Tests Remote Playback API integration
+- Shows button behavior and casting states
+
+## How to Test
+
+### Prerequisites
+1. Build the plugin: `npm run build`
+2. Start a local web server in the project root
+
+### Running Tests
+
+#### Option 1: Using a local web server
+```bash
+# From the project root
+python -m http.server 8000
+# or
+npx serve .
+```
+
+Then visit:
+- http://localhost:8000/examples/test-remote-playback.html
+- http://localhost:8000/examples/test-airplay.html  
+- http://localhost:8000/examples/test-chromecast.html
+
+#### Option 2: Using Live Server (VS Code)
+1. Install the "Live Server" extension
+2. Right-click on any HTML file
+3. Select "Open with Live Server"
+
+## Device Testing
+
+### AirPlay Testing
+- **Best tested on:** iOS Safari, macOS Safari
+- **Limited support:** Other browsers with Remote Playback API
+- **Expected behavior:** Button appears only on Apple devices
+
+### Chromecast Testing
+- **Best tested on:** Chrome browser with Cast support
+- **Limited support:** Other browsers with Remote Playback API
+- **Expected behavior:** Button appears on Chrome with Cast extension
+
+## What to Look For
+
+### ✅ Success Indicators
+- Buttons appear in the video player control bar
+- Clicking buttons opens device selection menus
+- Console shows successful API initialization
+- Visual feedback during connection states
+
+### ❌ Expected Limitations
+- Buttons may be hidden on unsupported devices
+- Some browsers only support Remote Playback API (limited device compatibility)
+- Full functionality requires device-specific APIs (WebKit for AirPlay, Chrome Cast for Chromecast)
+
+## Debugging
+
+### Console Logs
+All test files include comprehensive console logging:
+- Plugin initialization status
+- API availability checks
+- Button creation and visibility
+- Event handling
+- Error messages
+
+### Browser Developer Tools
+1. Open Developer Tools (F12)
+2. Check the Console tab for logs
+3. Check the Network tab for resource loading
+4. Check the Elements tab to inspect button HTML
+
+## Troubleshooting
+
+### Plugin Not Loading
+- Check that `npm run build` was successful
+- Verify the dist files exist
+- Check browser console for loading errors
+
+### Buttons Not Appearing
+- This is expected on unsupported devices
+- Check console logs for API availability
+- Verify the player is properly initialized
+
+### Casting Not Working
+- Ensure you're on a supported device/browser
+- Check that target devices are available on the network
+- Verify browser permissions for media access
diff --git a/examples/test-airplay.html b/examples/test-airplay.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AirPlay Device List Test</title>
+    <!-- Using local @silvermine/video.js package to ensure version consistency with peerDependencies -->
+    <link href="./node_modules/@silvermine/video.js/dist/video-js.css" rel="stylesheet">
+    <link href="./dist/videojs-remoteplayback.css" rel="stylesheet">
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        .info {
+            background: #e3f2fd;
+            padding: 15px;
+            border-radius: 5px;
+            margin: 20px 0;
+        }
+        .video-container {
+            margin: 20px 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="video-container">
+        <video
+            id="airplay-test-player"
+            class="video-js vjs-default-skin"
+            controls
+            preload="auto"
+            width="640"
+            height="360"
+            data-setup="{}">
+            <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
+            <p class="vjs-no-js">
+                To view this video please enable JavaScript, and consider upgrading to a web browser that
+                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>.
+            </p>
+        </video>
+    </div>
+
+    <!-- Using local @silvermine/video.js package to ensure version consistency with peerDependencies -->
+    <script src="./node_modules/@silvermine/video.js/dist/video.min.js"></script>
+    <script src="./dist/videojs-remoteplayback.umd.js"></script>
+    <script>
+        // Debug: Check what's available
+        console.log('🔍 Available globals:', Object.keys(window).filter(key => key.includes('Video')));
+        console.log('🔍 VideoJsRemotePlayback:', typeof VideoJsRemotePlayback);
+
+        // Initialize the plugin
+        if (typeof VideoJsRemotePlayback === 'function') {
+            VideoJsRemotePlayback(videojs);
+        } else {
+            console.error('❌ VideoJsRemotePlayback is not available as a global function');
+        }
+
+        // Create the player
+        const player = videojs('airplay-test-player', {
+            fluid: true,
+            responsive: true
+        });
+
+        // Add click event listener to test button functionality
+        player.ready(() => {
+            setTimeout(() => {
+                const airplayButton = document.querySelector('.vjs-airplay-button');
+                if (airplayButton) {
+                    airplayButton.addEventListener('click', () => {
+                        console.log('🎯 AirPlay button clicked!');
+                        console.log('🔍 Player airPlay manager:', player.airPlay);
+                    });
+                    console.log('✅ Added click listener to AirPlay button');
+                }
+            }, 200);
+        });
+
+        // Check for duplicate icons
+        player.ready(() => {
+            setTimeout(() => {
+                const airplayButton = player.el().querySelector('.vjs-airplay-button');
+                if (airplayButton) {
+                    const iconPlaceholders = airplayButton.querySelectorAll('.vjs-icon-placeholder');
+                    console.log('🔍 Icon placeholders found:', iconPlaceholders.length);
+                    console.log('✅ Should be exactly 1 icon placeholder');
+                    console.log('Button HTML:', airplayButton.outerHTML);
+
+                    if (iconPlaceholders.length === 1) {
+                        console.log('🎉 SUCCESS: Only 1 icon placeholder - duplication fixed!');
+
+                        // Check if using the correct SVG icon
+                        const iconStyle = window.getComputedStyle(iconPlaceholders[0]);
+                        const backgroundImage = iconStyle.backgroundImage;
+                        console.log('🔍 Background image URL:', backgroundImage);
+
+                        if (backgroundImage.includes('ic_airplay_white_24px.svg')) {
+                            console.log('✅ Using correct AirPlay SVG icon compiled from SCSS via Vite!');
+                            console.log('🎯 Icon is loaded from bundled images (built with the plugin)');
+                            console.log('📦 CSS compiled from styles/airplay.scss via Vite build process');
+
+                            // Try to determine the actual path
+                            if (backgroundImage.includes('dist/images/')) {
+                                console.log('🌐 Icon path: dist/images/ic_airplay_white_24px.svg');
+                            } else if (backgroundImage.includes('images/')) {
+                                console.log('🌐 Icon path: images/ic_airplay_white_24px.svg');
+                            }
+                        } else {
+                            console.log('⚠️ Icon might not be loading from the correct path');
+                            console.log('Background image:', backgroundImage);
+                        }
+                    } else {
+                        console.log('❌ ISSUE: Found', iconPlaceholders.length, 'icon placeholders');
+                    }
+                } else {
+                    console.log('❌ AirPlay button not found (correct for non-Safari browsers)');
+                }
+            }, 100);
+        });
+    </script>
+</body>
+</html>
diff --git a/examples/test-chromecast.html b/examples/test-chromecast.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chromecast Test</title>
+    <link href="../node_modules/@silvermine/video.js/dist/video-js.css" rel="stylesheet">
+    <link href="../dist/videojs-remoteplayback.css" rel="stylesheet">
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        .info {
+            background: #e3f2fd;
+            padding: 15px;
+            border-radius: 5px;
+            margin: 20px 0;
+        }
+        .video-container {
+            margin: 20px 0;
+        }
+        .test-results {
+            background: #f5f5f5;
+            padding: 15px;
+            border-radius: 5px;
+            margin: 20px 0;
+            font-family: monospace;
+        }
+    </style>
+</head>
+<body>
+    <h1>📺 Chromecast Test</h1>
+
+    <div class="info">
+        <strong>Testing Chromecast functionality:</strong><br>
+        • This test works best in Chrome browser<br>
+        • Make sure you have a Chromecast device on the same network<br>
+        • Look for the Chromecast button in the video player controls<br>
+        • Click the button to test casting functionality<br>
+        • If you see "No devices found" error, that's normal when no Chromecast is available<br>
+        • Check the browser console for detailed logs
+    </div>
+
+    <div class="video-container">
+        <video
+            id="chromecast-test-player"
+            class="video-js vjs-default-skin"
+            controls
+            preload="auto"
+            width="640"
+            height="360"
+            data-setup="{}">
+            <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
+            <p class="vjs-no-js">
+                To view this video please enable JavaScript, and consider upgrading to a web browser that
+                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>.
+            </p>
+        </video>
+    </div>
+
+    <div class="test-results" id="test-results">
+        Loading test results...
+    </div>
+
+    <script src="../node_modules/@silvermine/video.js/dist/video.min.js"></script>
+    <script src="../dist/videojs-remoteplayback.umd.js"></script>
+    <script>
+        VideoJsRemotePlayback(videojs);
+    </script>
+</body>
+</html>