@limeplay/core NPM

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.

📋 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:

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>
}

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>
    )
}