FunPlayer

Synchronized media and haptic playback for web applications

FunPlayer is a React component and Web Component that provides synchronized video/audio playback with haptic feedback through Intiface Central and compatible devices.

Features

• 🎬 Media Playback: Video, audio, and funscript-only playback
• 🎮 Haptic Sync: Precise synchronization with funscript data
• 🔌 Device Support: Compatible with all Buttplug.js supported devices
• 🎨 Customizable: Theming support with CSS variables
• 📱 Cross-Platform: Works on desktop, mobile, and VR browsers
• ⚡ Performance: Optimized for smooth playback and responsive haptics

Installation

npm install funplayer

Quick Start

React Component

import { FunPlayer } from 'funplayer'

function App() {
  const playlist = [
    {
      sources: [
        { src: 'video.mp4', type: 'video/mp4' }
      ],
      funscript: { actions: [/* funscript data */] },
      name: 'Example Video'
    }
  ]

  return (
    <FunPlayer 
      playlist={playlist}
      onPlay={() => console.log('Playing')}
      onDeviceConnect={(device) => console.log('Device connected:', device)}
    />
  )
}

Web Component (Embed)

<!-- Include the embed script -->
<script src="https://unpkg.com/funplayer/build-embed/funplayer-embed.js"></script>

<!-- Use the web component -->
<fun-player 
  playlist='[{"sources":[{"src":"video.mp4","type":"video/mp4"}],"funscript":{"actions":[...]}}]'
  theme='{"primaryColor":"#FF4B4B"}'
></fun-player>

API Reference

Props

playlist (Array, optional)

Array of playlist items. Each item follows the Video.js format with funscript integration:

{
  sources: [                    // Media sources (Video.js format)
    {
      src: 'video_720p.mp4',    // URL, local file, or data
      type: 'video/mp4',        // MIME type (auto-detected if omitted)
      label: '720p'             // Quality label (optional)
    }
  ],
  funscript: {                  // Haptic data
    actions: [                  // Array of action points
      { at: 1000, pos: 50 },    // at: timestamp (ms), pos: position (0-100)
      { at: 2000, pos: 80 }
    ]
  },
  name: 'Video Title',          // Display name
  description: 'Description',   // Optional description
  poster: 'poster.jpg',         // Poster image URL (optional)
  duration: 120.5,              // Duration in seconds (optional)
  textTracks: [...]             // Subtitles/captions (optional)
}

theme (Object, optional)

Customize the player appearance:

{
  // Colors
  primaryColor: '#FF4B4B',                    // Primary accent color
  backgroundColor: '#FFFFFF',                 // Main background
  secondaryBackgroundColor: '#F0F2F6',        // Secondary background
  textColor: '#262730',                       // Text color
  borderColor: '#E6EBF5',                     // Border color
  
  // Typography & Layout
  fontFamily: '"Source Sans Pro", sans-serif', // Font family
  baseRadius: '0.5rem',                        // Border radius
  spacing: '1rem',                             // Base spacing unit
  
  // Predefined base
  base: 'dark'                                // 'light' or 'dark'
}

Events

FunPlayer exposes standard Video.js events plus haptic-specific events:

Media Events

Event	Callback Prop	Description
play	onPlay	Playback started
pause	onPause	Playback paused
ended	onEnded	Playback finished
timeupdate	onTimeUpdate	Current time changed
seeking	onSeeking	User started seeking
seeked	onSeeked	User finished seeking
loadstart	onLoadStart	Started loading media
loadeddata	onLoadedData	Media data loaded
canplay	onCanPlay	Media can start playing
error	onError	Playback error occurred

Haptic Events

Event	Callback Prop	Description
deviceconnect	onDeviceConnect	Haptic device connected
devicedisconnect	onDeviceDisconnect	Haptic device disconnected
hapticstart	onHapticStart	Haptic playback started
hapticstop	onHapticStop	Haptic playback stopped

Playlist Events

Event	Callback Prop	Description
playlistitemchange	onPlaylistItemChange	Playlist item changed

Event Handler Example

<FunPlayer
  playlist={playlist}
  onPlay={(event) => {
    console.log('Playing:', event.detail)
  }}
  onDeviceConnect={(event) => {
    const device = event.detail
    console.log('Connected device:', device.name)
  }}
  onTimeUpdate={(event) => {
    const currentTime = event.detail.currentTime
    console.log('Current time:', currentTime)
  }}
/>

Setup Requirements

Browser Requirements

• Modern browser with WebRTC support
• HTTPS required for device access (except localhost)
• WebAssembly support for audio processing

Haptic Setup

1. Install Intiface Central
2. Connect your compatible device
3. Start Intiface Central server (default: ws://localhost:12345)
4. Allow browser permissions for device access

Supported Devices

FunPlayer works with all Buttplug.js compatible devices, including:

• Interactive toys (strokers, vibrators, etc.)
• Game controllers with haptic feedback
• Custom hardware via Buttplug device drivers

Advanced Usage

Programmatic Control

// Access the player instance (React)
const playerRef = useRef()

// Control playback
playerRef.current?.play()
playerRef.current?.pause()
playerRef.current?.seek(30) // Seek to 30 seconds

// Get player state
const currentTime = playerRef.current?.getCurrentTime()
const isPlaying = playerRef.current?.isPlaying()

Custom Theming

FunPlayer uses CSS custom properties for theming. You can override these directly:

.funplayer-container {
  --fp-primary-color: #your-color;
  --fp-background-color: #your-bg;
  --fp-text-color: #your-text;
}

Web Component Events

For the Web Component version, listen to events on the element:

const player = document.querySelector('fun-player')

player.addEventListener('funplayer-play', (event) => {
  console.log('Player started:', event.detail)
})

player.addEventListener('funplayer-deviceconnect', (event) => {
  console.log('Device connected:', event.detail)
})

Browser Support

• Chrome/Chromium 90+
• Firefox 90+
• Safari 14+
• Edge 90+

License

MIT

Links

• GitHub Repository
• Intiface Central
• Buttplug.js Documentation
• Funscript Format