feat: implement Airplay support

Author: judicaelandria

@types/global.d.ts

@@ -0,0 +1,21 @@
+import type { RemotePlaybackState, WebKitPlaybackTargetAvailabilityEvent } from './remote-playback';
+
+interface RemotePlayback extends EventTarget {
+   readonly state: RemotePlaybackState;
+   watchAvailability(callback: (available: boolean) => void): Promise<number>;
+   cancelWatchAvailability(id?: number): Promise<void>;
+   prompt(): Promise<void>;
+}
+
+interface HTMLVideoElement {
+   readonly remote?: RemotePlayback;
+}
+
+declare global {
+   interface Window {
+      WebKitPlaybackTargetAvailabilityEvent?: {
+         prototype: WebKitPlaybackTargetAvailabilityEvent;
+         new(type: string, eventInitDict?: EventInit): WebKitPlaybackTargetAvailabilityEvent;
+      };
+   }
+}

@types/remote-playback.ts

@@ -0,0 +1,19 @@
+export type RemotePlaybackState = 'connecting' | 'connected' | 'disconnected';
+
+export interface RemotePlaybackAvailabilityEvent extends Event {
+   availability: 'available' | 'not-available';
+}
+
+export interface RemotePlaybackPlugin {
+   getState(): RemotePlaybackState | null;
+   isConnected(): boolean;
+}
+
+export interface WebKitPlaybackTargetAvailabilityEvent extends Event {
+   availability: 'available' | 'not-available';
+}
+
+export interface HTMLVideoElementWithAirPlay extends HTMLVideoElement {
+   webkitCurrentPlaybackTargetIsWireless: boolean;
+   webkitShowPlaybackTargetPicker(): void;
+}

global.d.ts renamed to @types/silvermine-videojs.d.ts

@@ -0,0 +1,33 @@
+import videojs from '@silvermine/video.js';
+import type { VideoJsPlayer as VjsPlayer } from 'video.js';
+import type { AirPlayManager } from '../src/js/airplay/interfaces/Airplay.interfaces';
+import type { RemotePlaybackPlugin } from '../src/RemotePlaybackPlugin';
+
+export type VideoJs = typeof videojs;
+
+export interface VideoJsPlayer extends VjsPlayer {
+   airPlay?: AirPlayManager;
+   remotePlayback?: RemotePlaybackPlugin;
+}
+
+/**
+ * Video.js Button component interface
+ */
+export interface VideoJsButton {
+   el(): Element;
+   show(): void;
+   hide(): void;
+   addClass(className: string): void;
+   removeClass(className: string): void;
+   controlText(text?: string): string | void;
+   localize(text: string): string;
+   on(event: string, callback: () => void): void;
+   buildCSSClass(): string;
+}
+
+/**
+ * Video.js Button constructor interface
+ */
+export interface VideoJsButtonConstructor {
+   new (player: VideoJsPlayer, options?: Record<string, unknown>): VideoJsButton;
+}

@types/videojs.ts

@@ -24,6 +24,56 @@ for casting to external devices. This plugin bridges that gap by:
    * **Future-Proofing**: Built with modern web standards and TypeScript for
      maintainability
 
+## Development
+
+### 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/`
+
+### Development Server
+
+For interactive testing during development, use the built-in dev server:
+
+```bash
+# Build the plugin and start the dev server
+npm run dev:build
+
+# Or start the dev server separately (requires pre-built plugin)
+npm run build
+npm run dev
+```
+
+The dev server provides:
+
+   * **Interactive Test Pages**: Browse to `http://localhost:3000` for test examples
+   * **Live Testing**: Test AirPlay, Chromecast, and Remote Playback API functionality
+   * **Browser-Specific Tests**: Separate pages for testing different casting technologies
+   * **Real-time Debugging**: Console logging and status updates for development
+
+#### Available Test Pages
+
+   * **`/`** - Main examples index with links to all test pages
+   * **`/airplay.html`** - AirPlay functionality testing (Safari/Apple devices)
+   * **`/chromecast.html`** - Chromecast functionality testing (Chrome browser)
+   * **`/remote-playback.html`** - Generic Remote Playback API testing (cross-browser)
+
+### Running Tests
+
+```bash
+# Run unit tests
+npm test
+
+# Run linting and standards checks
+npm run standards
+```
 
 ## License
 

README.md

@@ -0,0 +1,46 @@
+# Test Examples
+
+This directory contains interactive test pages for the Video.js Remote Playback plugin.
+
+## Usage
+
+Start the development server:
+
+```bash
+npm run dev:build
+```
+
+Then browse to `http://localhost:3000` to access the test pages.
+
+## Test Pages
+
+### Main Index (`/`)
+
+Overview page with links to all test examples and usage instructions.
+
+### AirPlay Test (`/airplay.html`)
+
+   * **Purpose**: Test AirPlay functionality
+   * **Browser**: Safari (macOS/iOS)
+   * **Requirements**: AirPlay-compatible devices on the same network
+   * **Expected**: AirPlay button appears in Video.js control bar
+
+### Chromecast Test (`/chromecast.html`)
+
+   * **Purpose**: Test Chromecast functionality  
+   * **Browser**: Chrome
+   * **Requirements**: Chromecast devices on the same network
+   * **Expected**: Chromecast button appears in Video.js control bar
+
+### Remote Playback API Test (`/remote-playback.html`)
+
+   * **Purpose**: Test generic Remote Playback API across browsers
+   * **Browser**: Any (shows different behavior per browser)
+   * **Expected**: Shows browser compatibility and API availability info
+
+## Development Notes
+
+   * All test pages use CDN versions of Video.js for simplicity
+   * Plugin assets are served from the `/dist/` directory via Vite's `publicDir`
+   * Console logging provides detailed debugging information
+   * Real-time status updates help track plugin behavior

examples/README.md

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AirPlay Test - Video.js Remote Playback Plugin</title>
+    <!-- Video.js CSS from CDN for dev server -->
+    <link href="https://vjs.zencdn.net/7.19.0/video-js.css" rel="stylesheet">
+    <!-- Plugin CSS served from dist -->
+    <link href="/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>
+
+    <!-- Video.js from CDN for dev server -->
+    <script src="https://vjs.zencdn.net/7.19.0/video.min.js"></script>
+    <!-- Plugin JS served from dist -->
+    <script src="/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>