Socialplayer

A simple yet complete playback library designed for UI frameworks or even without

Architecture

• Bridge design pattern
• Plugin-based system
• Minimal API surface to avoid breaking changes
• Embrace the web platform APIs
• Avoid framework-specific locked-in APIs

Technology decisions

• Changesets - for versioning
• Happy-dom - for node-based browser testing environment
• Tsup - for bundling libraries
• Turbo - for remote-caching build system
• Github Actions - for CI/CD
• Netlify - for hosting
• TypeScript - for type safety
• Vite - for examples application
• Vitepress - for documentation
• Vitest - for unit and integration testing

Development

git clone https://github.com/willnguyen1312/socialplayer
cd socialplayer
pnpm install

Commands

With Docs

pnpm start-docs

With Preact

pnpm start-preact

With React

pnpm start-react

With Svelte

pnpm start-svelte

With Vanilla JS

pnpm start-vanilla

With Vue

pnpm start-vue

With Solid

pnpm start-solid

With Qwik

pnpm start-qwik

Roadmap

• ✅ Add examples
• ✅ Implement core logic
• ✅ Implement framework adapters
• ✅ Implement some common use plugins such as data streaming
• ✅ Write documentation

Supported framework adapters

• ✅ Vue
• ✅ Preact
• ✅ Svelte
• ✅ Solid
• ✅ React
• ✅ Qwik

Supported social media players

• YouTube
• Facebook
• SoundCloud
• Vimeo
• Wistia
• Twitch
• DailyMotion
• Vidyard
• Mixcloud
• Streamable player is powered by Player.js

Inspiration

• Tanstack - A collection of high-quality open source libraries for web developers
• Zag - A collection of framework-agnostic UI component patterns
• React-player - A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion
• UI frameworks and Media Elements 🎧

Sponsor

License

MIT © Nam Nguyen