Usage

npm i react-podcast-ninja # or yarn add react-podcast-ninja

import React from 'react'
import {NinjaPlayer} from 'react-podcast-ninja'

// Render a podcast player with multiple episodes
  <NinjaPlayer
    configs={configs}
    playerId={`${showId}-playlist`}
    episodes={episodes}
  />

By default, NinjaPlayer comes with a playlist. You can disable the playlist by setting singleEpisode props to true.

Demo page

Props

Prop | Description | Default ---- | ----------- | ------- playerId | id for the player episodes | Episodes to play. | [] // empty array configs | player colors | { hidePubDate: false, primaryBackgroundColor: "#0c1824", primaryButtonColor: "#f7f8f9", primaryTextColor: "#f7f8f9", progressBarFilledColor: "#f7f8f9",progressBarBackgroundColor: "#8A8175",playlistBackgroundColor: "#30343c",playlistTextColor: "#f7f8f9", chapterBackgroundColor: "#30343c",chapterTextColor: "#f7f8f9" } singleEpisode | Set to true or false to display the playlist panel | false

Episode structure

Name | Type | Required ---- | ----------- | ------- title | String | yes podcastTitle | String | yes artworkUrl | String | yes pubDate | DateTime | yes link | String | no audioUrl | String | yes chaptersUrl | String | no

Podcast player (using RSS feed)

import React from 'react'
import {NinjaPodcastPlayer} from 'react-podcast-ninja'

// Render a podcast player with multiple episodes
  <NinjaPodcastPlayer 
    playerId="podcast-example"
    rssFeedUrl={rssFeedUrl}
    configs={configs}
  />

Similar to the <NinjaPlayer/>, except it requires the RSS feed.

Motivation and history

While adding the PodcastIndex chapters namespace support to JustCast, I began noticing most of podcast widget players haven't support the chapters namespace yet.

I hope more podcasters can enbrace the chapters namespace, and someone can use it to get a head start into building something amazing!

Contributions

If you would like to contribute to this open source project, please feel free to submit a PR.

Todo

• Add support to person tag
• Better integration with PodcastIndex
  • fetch podcast per podcast_index_id
  • handle query episode_id from the url
  • handle query episode playing seconds from the url
• Chapter
  • add an indicator to playing chapter
  • scroll to the right chapter position
  • add support to chapter image
  • add support to chapter link
• Add support create share link