# podcast-widget

> **Podcast-Widget**

Latest version **1.0.14** (published 2022-06-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install podcast-widget
pnpm add podcast-widget
yarn add podcast-widget
bun add podcast-widget
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.14 |
| Published | 2022-06-06 |
| First published | 2022-03-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 134.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | arccorp |

## Links

- npm: https://www.npmjs.com/package/podcast-widget
- npm.io page: https://npm.io/package/podcast-widget

## Dependencies (9)

- [react](https://npm.io/package/react.md) ^16.13.1
- [moment](https://npm.io/package/moment.md) ^2.29.1
- [stream](https://npm.io/package/stream.md) ^0.0.2
- [numeral](https://npm.io/package/numeral.md) ^2.0.6
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.1
- [rss-parser](https://npm.io/package/rss-parser.md) ^3.12.0
- [react-loading](https://npm.io/package/react-loading.md) ^2.0.3
- [react-tooltip](https://npm.io/package/react-tooltip.md) ^4.2.21
- [react-app-polyfill](https://npm.io/package/react-app-polyfill.md) ^1.0.6

## Recent versions

- 1.0.14 (latest) — 2022-06-06
- 1.0.13 — 2022-06-06
- 1.0.12 — 2022-03-14
- 1.0.11 — 2022-03-14
- 1.0.9 — 2022-03-11
- 1.0.8 — 2022-03-11
- 1.0.7 — 2022-03-08
- 1.0.6 — 2022-03-08
- 1.0.5 — 2022-03-07
- 1.0.4 — 2022-03-07
- 1.0.3 — 2022-03-07
- 1.0.2 — 2022-03-07
- 1.0.1 — 2022-03-07
- 1.0.0 — 2022-03-07

## README

**Podcast-Widget**

//Psuedo-Code
app.jsx
RSS - componentdidmount

set data as array of objects in the state

rss-parser -> turn javascript object

state = podcastdata
{
  title: pocast ep 1
}
{
  podcast ep 2
}

render() {
  <podcast-playlist data={podcastdata}></podcast-playlist>
}

-podcast-playlist
<div>
for(i){
  <podcast-episode props={i}></podcast-episode>
}
</div>

-podcast-episode
<div>
</div>

***Making a playlist***
I'm thinking we can create some controls for the play,pause, next and previous. Then we can load the .mp3 url of the selected file (depending on where which on we click) into a single html audio element. You would need some states: boolean for if the playlist is playing, an index for the selected track, and maybe a state for the currently playing mp3 file url from the rss feed.

**States:**
feed: rss feed (feed.items contains all track data)
playing: boolean
trackIndex: integer
currentTrackUrl: string

**Functions:**
see https://www.w3schools.com/jsref/dom_obj_audio.asp

playpause() {
  play or pause depending on the playing state
  do function to play/pause audio element
  update playing state
}

next() {
  -run playpause()
  -get current index then ++ to the next index (if current index is  at end of tracks go to first index)
  -with that index, get the audio and set currentTrackUrl state to new url
  -play player
  -run playpause()
}

previous() {
  -run playpause()
  -get current index then -- to the prevoius index (if at start of tracks go to last index)
  -with that index, get the audio and set currentTrackUrl state to new url
  -play player
  -run playpause()
}

Steps
1. Create some buttons that will control which file is playing
2. Create one audio tag element that will contain the loaded url
3. If the currently playing state is empty then load the first track, otherwise continue the track that it's on
4. You'll have to move the audio out of episode and into app.jsx
5. You can do an onclick on the loop for displaying each audio track

---
_Source: https://npm.io/package/podcast-widget · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._