# Poductivity Player

A web component based podcast player with Poductivity enhancement. Only works for shows that are registered with Poductivity.

## Usage
Include the script on the page:
```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@poductivity/poductivity-embed-player@latest/dist/poductivity-embed-player.js"></script>
```

Then use the web component where you want the player to appear:
```html
<poductivity-player episode-id="XXX"></poductivity-player>
```
or, instead of the Poductivity Episode ID, you can provide the feed details:
```html
<poductivity-player feed-url="XXX" episode-guid="XXX"></poductivity-player>
```

## Styling

### Accent colour
Set an accent colour for one player instance:
```html
<poductivity-player episode-id="XXX" accent-color="#ff0000"></poductivity-player>
```

Set an accent colour for all players on a page by adding a custom property/variable to your CSS:
```css
:root {
    --poductivity-accent: #ff0000;
}
```

## API

<!-- Auto Generated Below -->


## Properties

| Property      | Attribute      | Description                                                                      | Type                                 | Default     |
| ------------- | -------------- | -------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
| `accentColor` | `accent-color` | Accent colour. Supply as any CSS supported colour format, eg. #ff0000            | `string`                             | `undefined` |
| `debug`       | `debug`        | Enable Debug mode. For internal use only                                         | `boolean`                            | `false`     |
| `episodeGuid` | `episode-guid` | The Episode GUID as specified in the feed                                        | `string`                             | `undefined` |
| `episodeId`   | `episode-id`   | The Poductivity Episode ID. Either this or feedUrl and episodeGuid are required  | `string`                             | `undefined` |
| `feedUrl`     | `feed-url`     | The Feed URL                                                                     | `string`                             | `undefined` |
| `horizontal`  | `horizontal`   | Should the player be horizontal?                                                 | `boolean`                            | `false`     |
| `theme`       | `theme`        | Specify the theme to use. Defaults to 'light'.                                   | `"dark" \| "light" \| "poductivity"` | `'light'`   |
| `useOsFont`   | `use-os-font`  | Use the Operating System's default UI font instead of the Poductivity brand font | `boolean`                            | `false`     |


## Events

| Event        | Description                                | Type                             |
| ------------ | ------------------------------------------ | -------------------------------- |
| `pdPlayback` | Emitted when playback is started or paused | `CustomEvent<PlaybackEventData>` |


## Methods

### `hideEpisodeNotes() => Promise<void>`

Hide the episode notes panel

#### Returns

Type: `Promise<void>`



### `pause() => Promise<void>`

Pause playback

#### Returns

Type: `Promise<void>`



### `play() => Promise<void>`

Begin or resume playback

#### Returns

Type: `Promise<void>`



### `seekRelative(seconds: number | string) => Promise<void>`

Seek to a timestamp relative to the current playback position in seconds

#### Returns

Type: `Promise<void>`



### `seekTo(timestamp: number | string, fastSeek?: boolean) => Promise<void>`

Seek to a specific timestamp in seconds

#### Returns

Type: `Promise<void>`



### `setPlaybackRate(playbackRate: number) => Promise<void>`

Show the episode notes panel

#### Returns

Type: `Promise<void>`



### `showEpisodeNotes() => Promise<void>`

Show the episode notes panel

#### Returns

Type: `Promise<void>`



### `togglePlay() => Promise<void>`

Either play or pause playback, depending on the current playback state

#### Returns

Type: `Promise<void>`




## Dependencies

### Depends on

- [poductivity-client](../pd-client)
- [poductivity-marquee](../pd-marquee)
- [poductivity-opt-out-control](../pd-opt-out-control)
- [poductivity-modal](../pd-modal)
- [poductivity-playback-rate-control](../pd-playback-rate-control)
- [poductivity-input-range](../pd-input-range)

### Graph
```mermaid
graph TD;
  poductivity-player --> poductivity-client
  poductivity-player --> poductivity-marquee
  poductivity-player --> poductivity-opt-out-control
  poductivity-player --> poductivity-modal
  poductivity-player --> poductivity-playback-rate-control
  poductivity-player --> poductivity-input-range
  poductivity-client --> poductivity-messages
  poductivity-client --> poductivity-modal
  poductivity-client --> poductivity-subscribe
  poductivity-client --> poductivity-opt-out-control
  poductivity-messages --> poductivity-marquee
  poductivity-subscribe --> poductivity-modal
  style poductivity-player fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Copyright Poductivity Limited, All Rights Reserved