A Simple component library for radio player in react

Table of Contents

• Overview
• Installation
• Basic Example
• APIs
  • Base Props
  • Bottom Bar
• Contributing
• Try out
• License

Overview

This is a simple and light-weight component library to handle radio player in React.js projects.

Installation

# npm 
npm install react-radio-player

# yarn
yarn install react-radio-player

Basic example

Usage of this component is so easy you just need to import your desired component, pass title and streamURL, then you're good to go:

import RadioBottomBarPlayer from "../radio-bottom-bar-player";

// ... 

<RadioBottomBarPlayer
  titleChild="Testing Station title"
  streamUrl={stationUrl}
/>

APIs

Base Props

| Prop | type | Descriptions | | -------- | ------- | ------- | | streamUrl | string | URL of radio stream to be played | | titleChild | ReactNode | Tile to show in component | | description? | ReactNode | First description for component | | secondDescription? | ReactNode | Second description for the radio | | customClassName? | Object | some class names for the parts of components, separately | | image? | ReactNode or string | Image related to the radio | | styles? | CSSProperties | Inline styles related to the component| | theme? | IBaseTheme | Object related to the theme to change the ui of the component | | isPrevButtonHidden? | boolean | Will hide prev button | | isNextButtonHidden? | boolean | Will hide next button| | isPrevButtonDisabled | boolean | Will disable prev button | |isNextButtonDisabled | boolean | Will disable next button | | onErrorCatched | (mediaError: MediaError or null, event: ErrorEvent): void; | Callback on catch any error of component |onNextButtonClicked | (event: React.MouseEvent): void; | Callback after clicked on next button |onPrevButtonClicked | (event: React.MouseEvent): void; | Callback after cliked on prev button |onPlayButtonClicked | (event: React.MouseEvent): void; | Callback after clicked on play button |onVolumeSliderChanged | (percentage: number): void; | Callback after changed volume |onLoadedStreamHandler | (): void; | Callback after load of stream data

type customClassName = {
    container?: string;
    infoContainer?: string;
    imageContainer?: string;
    image?: string;
    textsContainer?: string;
    title?: string;
    description?: string;
    secondDescription?: string;
    player?: string;
    playButton?: string;
    prevButton?: string;
    nextButton?: string;
    volumeContainer?: string;
    volume?: string;
    volumeIcon?: string;
    playerButtonsContainer?: string;
  }

interface IBaseTheme {
  backgroundColor: string;
  fontFamily: string;
  TitleFontSize: string;
  descriptionFontSize: string;
  secondDescriptionFontSize: string;
  primaryColor: string;
  disabledColor: string;
  hoverColor: string;
  titleFontWeight: string;
  descriptionFontWeight: string;
  secondDescriptionFontWeight: string;
  buttonsColor: string;
  firstTextColor: string;
  secondTextColor: string;
  padding: string;
  volumeTrackColor: string;
  voluemHandleColor: string;
  volumeRailColor: string;
  volumeIconColor: string;
}

Try Out

You can watch our staging components in a storybook and work around with it from this link

Bottom Bar

Bottom bar component will use all of basic props just for theme it will be like following:

export type RadioBottomBarTheme = IBaseTheme & {
  height: number;
};

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT