🔰 Build Bullet Proof & Stunning Media Players at Ease

Limeplay is a React based component UI library build on top of Shaka Player that allows you to build stunning, accessible and modern looking Media Players with ease. It exposes several hooks and highly configurable components using which you can build any functional Media Player like Netflix, Youtube, Hulu, Hotstar, without having to worry about the underlying player logic while adhering to accessibility best practices.

🚧 This project is still in its early stages and is looking for contributors 🚧

🏗️ This project is under Heavy Development, Things might change anytime! 🏗️

Table of contents

• 📋 Documentation
• 🚀 Features
• 📦 Installation
• 💻 Usage
• 👋 Support
• 📝 Contributing
• ⚖️ License

Documentation

👉 It's the https://docs.limeplay.me website for the latest version of Limeplay.

Features

• To be Added
• To be Added
• To be Added
• To be Added

Installation

To use Limeplay UI components, all you need to do is install the @limeplay/core package and its peer dependencies:

$ yarn add @limeplay/core @emotion/react@^11 @emotion/styled@^11

# or

$ npm i @limeplay/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Usage

To start using the components, please follow these steps:

1. Wrap your application with the LimeplayProvider provided by @limeplay/core.

import { LimeplayProvider } from "@limeplay/core"

// Do this at the root of your application
function App({ children }) {
  return <LimeplayProvider>{children}</LimeplayProvider>
}

2. Import the components you want to use from @limeplay/core and wrap them with the PlayerWrapper component.

import { PlayerWrapper, VideoWrapper, ControlsOverlay, PlaybackControl, VolumeControl } from "@limeplay/core"

function MyFullscreenPlayer() {
    return (
        <PlayerWrapper withShaka>
            <ControlsOverlay>
                <PlaybackControl />
                <VolumeControl />
            </ControlsOverlay>
            <VideoWrapper
                src="https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd"
                volume={0.5}
            />
        </PlayerWrapper>
    )
}

Support & Discussion

More guides on how to get started are available here For issues, discussion, and support, please join our Discord Server.

Contributing

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT © WINOFFRG