open-index/open-npm huggingface dataset:
npm package: @podlipny/eslint-config
Description: ESLint and TSLint rules
Author: Jiri Podlipny, ji.podlipny@gmail.com
Latest version: 1.0.4

# @podlipny/eslint-config
Eslint configurations based on AirBnB, standard for JS, JSX, TS, TSX, React

# Throubleshhoting

## import/no-unresolved inside multifoldeer structure
this is caused by nesting project into multifolder repo structure. You need to specify path to tsconfig.json

```
"settings": {
    "import/resolver": {
      "typescript": {
        "project": [
          "./tsconfig.json",
          "./[path to tsconfig]/tsconfig.json"
        ]
      }
    }
  },
```
npm package: @podlove/button-actions
Description: Actions for Podlove Subscribe Button Framework
Author: Alexander Heimbuch
Latest version: 6.1.0-alpha.1

# Button Actions [BUTTON_]

> Button API/Events that establish side effects and state changes based on [redux-actions](https://github.com/redux-utilities/redux-actions)

```javascript
{
  type: 'BUTTON_SHOW_FINISH_CARD'
}
```

## Types

All Button action types are defined within `@podlove/button-action/types` which is the foundation for all actions.

## Actions

Export helper function for different button use cases. Each exported function will produce a specific action passing the arguments to the payload.
npm package: @podlove/button-config
Description: Configuration for Podlove Button Framework
Author: Alexander Heimbuch
Latest version: 6.1.0-alpha.0

# Podlove Subscribe Button Configuration

> Configuration Parser for Subscribe Button

## Properties

- `feed`: RSS Feed (string)
- `clients`: List of clients with id and optional service (array)
- `theme`: Configured theme (object)
- `language`: Configured runtime language (string)

## Example Configuration

```
{
  "theme": {
    "tokens": {
      "brand": "#E64415",
      "brandDark": "#235973",
      "brandDarkest": "#1A3A4A",
      "brandLightest": "#E9F1F5",
      "shadeDark": "#807E7C",
      "shadeBase": "#807E7C",
      "contrast": "#000",
      "alt": "#fff"
    },
    "fonts": {
      "ci": {
        "name": "FiraSansExtraBold",
        "family": ["FiraSansExtraBold", "Calibri", "Candara", "Arial", "Helvetica", "sans-serif"],
        "weight": 800,
        "src": [
          "https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnMK7eShf6Xl7Gl3LX.woff2"
        ]
      },
      "regular": {
        "name": "FiraSansLight",
        "family": [
          "FiraSansLight",
          "Calibri",
          "Candara",
          "Arial",
          "Helvetica",
          "sans-serif"
        ],
        "weight": 300,
        "src": ["https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnPKreSxf6Xl7Gl3LX.woff2"]
      },
      "bold": {
        "name": "FiraSansBold",
        "family": ["FiraSansBold", "Calibri", "Candara", "Arial", "Helvetica", "sans-serif"],
        "weight": 700,
        "src": ["https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnLK3eRRf6Xl7Gl3LX.woff2"]
      }
    }
  },
    "feed": "http://feeds.soundcloud.com/users/soundcloud:users:319180361/sounds.rss",
    "clients": [
      {
        "id": "apple-podcasts",
        "service": "lobo-der-debatten-podcast/id1259142707"
      }
    ],
    "runtime": {
      "language": "de"
    }
  }
}
```
npm package: @podlove/button-state
Description: Reducers for Podlove Button Framework
Author: Alexander Heimbuch
Latest version: 6.1.0-alpha.1

# Button State

> Button Reducer and Selectors creating the state, created with [redux-actions](https://github.com/redux-utilities/redux-actions)

## Reducers

Each state slice provides a reducer function, that can be used to create the store:

```javascript
import { combineReducers } from 'redux'

import { reducer as runtime } from '@podlove/button-state/runtime'
import { reducer as theme } from '@podlove/button-state/theme'

export default combineReducers({
  runtime,
  theme
})
```

Depending on the application use case only a specific set of reducers can be used and arbitrary combined.

## Selectors

A selector is a function that provides access to a specific state property without the need to know the specific state structure:

```javascript
import { selectors as runtime } from '@podlove/player-state/runtime'
import { compose } from 'ramda'

import root from './root'

export default {
  language: compose(
    runtime.language,
    root.runtime
  ),
  platform: compose(
    runtime.platform,
    root.runtime
  )
}
```

Depending on the application use case and the state structure only a specific set of selectors are needed.
npm package: @podlove/components
Description: Reusable Podlove UI Components
Author: Alexander Heimbuch
Latest version: 6.1.0-alpha.1

# Components

> Reusable representational Vue components

![Preview](screenshot.png)

## Available Components

- Buttons: Play Button, Chapter, Stepper
- Card
- Channels (Social Media Channels)
- Icons
- Image (Lazy Loading Fade enabled)
- Inputs: Groups, Text, Slider, Select
- Tabs: Header and Body
- Tooltip
- Timers

## Getting Started

### Development

1. Bootstrap the components package: `lerna bootstrap --hoist`
2. Run the development mode: `npm run dev`
3. Open your browser on `http://localhost:6000` to get started

### Building

1. Make sure that the dependencies are up to date: `lerna bootstrap --hoist`
2. Run the build step: `npm run build`

## Development Philosophy

Components are meant to be used from different applications. They stick to the following principles:

- Are concerned with how things look
- Have no dependencies on the application state
- Don’t specify how the data is loaded or mutated
- Receive data via props, send data/actions via events
- Rarely have their own state (when they do, it’s UI state rather than data)
npm package: @podlove/player-actions
Description: Actions for Podlove Player Framework
Author: Alexander Heimbuch
Latest version: 6.1.0-alpha.1

# Player Actions [PLAYER_]

> Player API/Events that establish side effects and state changes based on [redux-actions](https://github.com/redux-utilities/redux-actions)

```javascript
{
  type: 'PLAYER_SHOW_LIST',
  payload: 102020
}
```

## Types

All Player action types are defined within `@podlove/player-action/types` which is the foundation for all actions.

## Actions

Export helper function for different player use cases like chapters, theme, errors and lifecycle. Each exported function will produce a specific action passing the arguments to the payload.
npm package: @podlove/player-react
Description: React Wrapper for Podlove Web Player
Author: Alexander Heimbuch
Latest version: 5.12.2

# @podlove/player-react

> React wrapper for @podlove/web-player

## Installation

- Run `npm i @podlove/player-react`

## Usage

```jsx
import { PodloveWebPlayer } from '@podlove/player-react';

<PodloveWebPlayer 
episode="https://backend.podlovers.org/wp-json/podlove-web-player/shortcode/publisher/60" 
config="https://backend.podlovers.org/wp-json/podlove-web-player/shortcode/config/podlovers/theme/default" />
```

## Properties

- `episode`: Episode metadata as file reference or as plain object, see [episode docs](https://docs.podlove.org/podlove-web-player/v5/configuration#episode)
- `config`: Config metadata as file reference or as plain object, see [config docs](https://docs.podlove.org/podlove-web-player/v5/configuration#config)
- `base`: (Optional) player resource base, will fallback to the cdn if not provided
- `variant`: (Optional) player template variant, see [templating docs](https://docs.podlove.org/podlove-web-player/v5/templating/getting-started#variants)
- `playtime`: (Optional) initial playtime in milliseconds
- `tab`: (Optional) initial tab in milliseconds
- `template`: (Optional) remote template

## Callbacks
- `onLoaded`: (Optional) callback hook that gets called with the player store, see [runtime API](https://docs.podlove.org/podlove-web-player/v5/extensions/runtime-api)

## Children
Provided children will be parsed as [player templates](https://docs.podlove.org/podlove-web-player/v5/templating/components/root):

```jsx
<PodloveWebPlayer 
episode="https://backend.podlovers.org/wp-json/podlove-web-player/shortcode/publisher/60" 
config="https://backend.podlovers.org/wp-json/podlove-web-player/shortcode/config/podlovers/theme/default">
 { 
  `<root style="max-width: '950px'; min-width: '260px'" class="p-4 flex justify-center rounded">
    <play-button></play-button>
  </root>`
 } 
</PodloveWebPlayer>
```
npm package: @podlove/player-sagas
Description: Sagas for Podlove Web Player
Author: Alexander Heimbuch
Latest version: 6.1.0-alpha.1

# Player Sagas

> Isolated side effects for the player lifecycle based on [redux-saga](https://github.com/redux-saga/redux-saga)

## Available Sagas

### Lifecycle

Parses provided configuration and emits the `READY` event.

```javascript
import sagas from '@podlove/player-sagas'
import lifecycleSaga from '@podlove/player-sagas/lifecycle'

sagas.run(
  lifecycleSaga
)
```

### Runtime

Parses the player runtime (browser, client, ...) and emits `SET_RUNTIME`.

```javascript
import sagas from '@podlove/player-sagas'
import runtimeSaga from '@podlove/player-sagas/runtime'

sagas.run(
  runtimeSaga
)
```

### Player

Connects the media actions (start, stop, scrub, ...) to the html5 audio/video api.

```javascript
import sagas from '@podlove/player-sagas'
import playerSaga from '@podlove/player-sagas/player'

sagas.run(
  playerSaga({ selectMedia: selectors.media, selectPlaytime: selectors.playtime })
)
```

### Components

Shows/Hides components depending on the player state.

```javascript
import sagas from '@podlove/player-sagas'
import componentsSaga from '@podlove/player-sagas/components'

sagas.run(
  componentsSaga
)
```

### Chapters

Applies needed side effects when interacting with playtime/chapters.

```javascript
import sagas from '@podlove/player-sagas'
import chaptersSaga from '@podlove/player-sagas/chapters'

sagas.run(
  chaptersSaga({
    selectDuration: selectors.duration,
    selectPlaytime: selectors.playtime,
    selectCurrentChapter: selectors.chapters.current,
    selectChapterList: selectors.chapters.list
  })
)
```

### Quantiles

Creates quantiles for already listened sections.

```javascript
import sagas from '@podlove/player-sagas'
import quantilesSaga from '@podlove/player-sagas/quantiles'

sagas.run(
  quantilesSaga
)
```

### Version

Reads the Player Version and dispatches it to the store.

```javascript
import sagas from '@podlove/player-sagas'
import versionSaga from '@podlove/player-sagas/version'

sagas.run(
  versionSaga({ version })
)
```

### Transcripts

Applies needed side effects when interacting with playtime/transcripts.

```javascript
import sagas from '@podlove/player-sagas'
import transcriptsSaga from '@podlove/player-sagas/transcripts'

sagas.run(
  transcriptsSaga({ selectChapters: selectors.chapters.list, selectSpeakers: selectors.contributors })
)
```
npm package: @podlove/player-state
Description: Reducers for Podlove Player Framework
Author: Alexander Heimbuch
Latest version: 6.1.0-alpha.1

# Player State

> Player Reducer and Selectors creating the state, created with [redux-actions](https://github.com/redux-utilities/redux-actions)

## Reducers

Each state slice provides a reducer function, that can be used to create the store:

```javascript
import { combineReducers } from 'redux'

import { reducer as runtime } from '@podlove/player-state/runtime'
import { reducer as theme } from '@podlove/player-state/theme'

export default combineReducers({
  runtime,
  theme
})
```

Depending on the application use case only a specific set of reducers can be used and arbitrary combined.

## Selectors

A selector is a function that provides access to a specific state property without the need to know the specific state structure:

```javascript
import { selectors as runtime } from '@podlove/player-state/runtime'
import { compose } from 'ramda'

import root from './root'

export default {
  language: compose(
    runtime.language,
    root.runtime
  ),
  platform: compose(
    runtime.platform,
    root.runtime
  )
}
```

Depending on the application use case and the state structure only a specific set of selectors are needed.
npm package: @podlove/source-publisher
Description: > Gridsome Source for [Podlove Publisher](https://wordpress.org/plugins/podlove-podcasting-plugin-for-wordpress/)
Author: Alexander Heimbuch
Latest version: 0.4.2

# @podlove/source-publisher

> Gridsome Source for [Podlove Publisher](https://wordpress.org/plugins/podlove-podcasting-plugin-for-wordpress/)

## Requirements

- Podlove Publisher with in version 3.1 or later

## Installation

1. Install the package

> npm i @podlove/source-publisher --save-dev

2. Add the source to `gridsome.config.js` plugins

```javascript
{
  use: '@podlove/source-publisher',
  options: {
    baseUrl: 'https://publisher.com', // required
    apiBase: 'wp-json', // optional
    typeName: 'Podlove', // optional
    imageCache: 'src/assets/images' // optional
  }
}
```

## Usage

This source plugin is meant for a single Podcast show with multiple episodes.

### Static Queries

The `Show` is provided as static metadata.

_Example Usage:_

```
<static-query>
query {
  metadata {
    PodloveShow {
      title,
      subtitle,
      summary,
      poster
    }
  }
}
</static-query>
```

### Dynamic Queries

Core to this plugin is the `Episode` object that contains `Audio` files, a list of `Chapter`, `Transcript`, `Contributor` and a `Timeline`:

_Example Usage:_

```
<page-query>
query ($id: ID!) {
  podloveEpisode(id: $id) {
    id,
    path,
    title,
    summary,
    publicationDate,
    poster,
    duration,
    content,
    audio {
      url,
      size,
      title,
      mimeType
    },
    chapters {
      start,
      end,
      title,
      href,
      image
    },
    contributors {
      details {
        id,
        name
        avatar
      }
    },
    timeline {
      node,
      title,
      type,
      start,
      end,
      texts {
        start,
        end,
        text
      },
      speaker {
        avatar,
        name
      }
    }
  }
}
</page-query>
```

## Image Caching

Beside fetching the show and episode data this plugin also copies source images from the publisher for better caching. Resolved images are relative to the provided `imageCache` path. To use the images in your application a custom webpack resolver in the `gridsome.config` is recommended:

```javascript
  chainWebpack: config => {
    config.resolve.alias.set('@images', '@/assets/images')
  },
```

Finally in the component caching and resizing can be created with the `asset-loader`:

```html
<g-image v-if="poster" :src="require(`!!assets-loader?width=180&height=180!@images/${poster}`)" />
```
npm package: @podlove/types
Description: TypeScript type definitions for Podlove Framework
Latest version: 6.1.0-alpha.0

# @podlove/types

TypeScript type definitions for Podlove Framework.

## Install

Install the types with

```bash
npm install @podlove/types --save-dev
```

## Embedded Web Player
If you want to import the types for the embedded web player you can import the types with:

```ts
import "@podlove/types/embed"
```

After this `windows.podlovePlayer` should be defined.

You can also just import the web player function type if you want:

```ts
import { podlovePlayer } from "@podlove/types";
```

this way you can also import other types like:

```ts
import { PodloveWebPlayerConfig } from "@podlove/types";
npm package: @podlove/utils
Description: Utils for Podlove Framework
Author: Alexander Heimbuch
Latest version: 6.1.0-alpha.1

# Utils

> Helpers for dealing with Podcast related data structure and handling Javascript quirkses

## Utils

- chapters: tooling to parse chapters and find active entries
- color: default colors and luminosity calculations
- detect: mobile/desktop detection
- dom: functional dom helpers
- helper: the misc file every project needs :/
- keyboard: event listeners and keycode parser
- localstorage: safe localstorage abstraction
- location: player url parameter parser
- math: math helpers to get more robust float calculations
- predicates: predicate helpers
- request: ajax helpers for json and html requests
- sandbox: iframe sandbox utils
- search: binary and text search functions
- throttle: throttle helper
- time: time player parsing/transformation
- url: hostname helpers
- useragent: user agent parser
npm package: @podlove/web-player
Description: Embedded version of Podlove Player
Author: Alexander Heimbuch
Latest version: 5.13.0

# Podlove Web Player

> Sandboxed Podlove Player Templates with the ability to embed and share episodes

![Preview](screenshot.png)

## About

HTML5 Goodness for Podcasting

**Podlove** Web Player is a Podcast-optimized, HTML5-based video and audio player.
It can be used as a WordPress plugin or within a static HTML/JavaScript context.

The **Podlove** Web Player supports almost every modern browser (Edge, Firefox, Chrome, Safari) and also does captions, chapters, transcripts and much more. 

* [Web Player Documentation](http://docs.podlove.org/podlove-web-player/)
* [Official site on podlove.org](http://podlove.org/podlove-web-player/)

## Features

- Encapsulate Player in an iframe
- Provide a global function to bootstrap the embedded player
- Parse the provided configuration (resolving the root config, transcripts and chapters asynchroniously)
- Persist selected tabs and playtime to local storage
- Transform url parameters to player actions
- Forward the player api to the embedding page
- Provide additonal extensions for embedding page integration

## Architecture

![Architecture](architecture.svg)

## Getting Started

### Development

1. Bootstrap the web-player package: `lerna bootstrap --hoist`
2. Run the development mode: `npm run dev`
3. Open your browser on `http://localhost:9000` to get started

### Building

1. Make sure that the dependencies are up to date: `lerna bootstrap --hoist`
2. Run the build step: `npm run build`