Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/willnguyen1312/headlessplayback
A simple yet complete playback library designed for UI frameworks or even without
https://github.com/willnguyen1312/headlessplayback
audio playback preact qwik react solid svelte video vue
Last synced: 3 days ago
JSON representation
A simple yet complete playback library designed for UI frameworks or even without
- Host: GitHub
- URL: https://github.com/willnguyen1312/headlessplayback
- Owner: willnguyen1312
- License: mit
- Created: 2023-05-19T11:59:59.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-11T14:30:24.000Z (4 months ago)
- Last Synced: 2024-08-30T20:18:39.398Z (28 days ago)
- Topics: audio, playback, preact, qwik, react, solid, svelte, video, vue
- Language: TypeScript
- Homepage: https://willnguyen1312.github.io/headlessplayback/
- Size: 2.37 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Headlessplayback
A simple yet complete playback library designed for UI frameworks or even
without
## Architecture
- Headless UI
- 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](https://github.com/changesets/changesets) - for versioning
- [Happy-dom](https://github.com/capricorn86/happy-dom) - for node-based browser
testing environment
- [Tsup](https://tsup.egoist.dev/) - for bundling libraries
- [Turbo](https://turbo.build/repo) - for remote-caching build system
- [Github Actions](https://github.com/features/actions) - for CI/CD
- [Netlify](https://www.netlify.com/) - for hosting
- [TypeScript](https://www.typescriptlang.org/) - for type safety
- [Vite](https://vitejs.dev/) - for examples application
- [Vitepress](https://vitepress.dev/) - for documentation
- [Vitest](https://vitest.dev/) - for unit and integration testing
## Development
```bash
git clone https://github.com/willnguyen1312/headlessplayback
cd headlessplayback
pnpm install
```
## Commands
### With Docs
```bash
pnpm start-docs
```
### With Preact
```bash
pnpm start-preact
```
### With React
```bash
pnpm start-react
```
### With Svelte
```bash
pnpm start-svelte
```
### With Vanilla JS
```bash
pnpm start-vanilla
```
### With Vue
```bash
pnpm start-vue
```
### With Solid
```bash
pnpm start-solid
```
### With Qwik
```bash
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
## Inspiration
- [Tanstack](https://tanstack.com) - A collection of high-quality open source
libraries for web developers
- [Zag](https://zagjs.com) - A collection of framework-agnostic UI component
patterns
- [Day.js](https://day.js.org/docs/en/plugin/plugin) - A modern JavaScript date
utility library
- [VueUse](https://vueuse.org) - Collection of Essential Vue Composition
Utilities
- [Radix UI](https://www.radix-ui.com) - A collection of open source UI
components
- [Building a modern design system in layers](https://blog.almaer.com/building-a-modern-design-system-in-layers/?ck_subscriber_id=1238259209)
- [UI frameworks and Media Elements 🎧](https://medium.com/axon-enterprise/ui-frameworks-and-media-elements-c0c6832528e5)
## Sponsor
## License
MIT © [Nam Nguyen](https://github.com/willnguyen1312)