npm package: @outbook/webcomponents-lyrics
Description: Web components lyrics
Author: Antonio Rodríguez
Latest version: 1.0.1

# @outbook/webcomponents-lyrics

This package provides a web component for displaying synchronized lyrics. It can either take lyrics text directly or fetch them from a provided route, and synchronize their display with a given current time.

## Installation

```bash
npm install @outbook/webcomponents-lyrics
```

## Usage

### As a Lit Element

```javascript
import {html} from 'lit';
import {Lyrics} from '@outbook/webcomponents-lyrics';

function render() {
  const exampleLyrics = `
[00:10.00]Hello
[00:15.00]World
`;
  const currentTime = 12; // Example current time in seconds

  return html`
    ${Lyrics({
    lang: 'en',
    text: exampleLyrics,
    // Or use route: 'path/to/lyrics.lrc',
    currentTime: currentTime,
  })}
  `;
}
```

### Direct HTML Usage

You can also use the custom element directly in your HTML. Remember to import the component's JavaScript for the custom element to be defined.

```javascript
import '@outbook/webcomponents-lyrics';
```

```html
<outbook-lyrics
  lang="en"
  route="path/to/lyrics.lrc"
  current-time="12"
></outbook-lyrics>

<!-- Or with direct text content (property binding in frameworks) -->
<outbook-lyrics lang="en"></outbook-lyrics>
<script>
  const lyricsElement = document.querySelector('outbook-lyrics');
  lyricsElement.text = `
[00:10.00]Hello
[00:15.00]World
`;
</script>
```

## Component: `outbook-lyrics`

This is the underlying web component. It can be used directly in HTML or in any framework.

### Properties / Attributes

| Attribute      | Property      | Type      | Default     | Description                                                     |
|----------------|---------------|-----------|-------------|-----------------------------------------------------------------|
| `lang`         | `lang`        | `String`  | `'en'`      | The language for localization of internal texts.                |
| `route`        | `route`       | `String`  | `null`      | URL to fetch LRC-formatted lyrics from.                         |
| `current-time` | `currentTime` | `Number`  | `0`         | Current time in seconds to synchronize the lyrics display.      |
|                | `text`        | `String`  | `null`      | Direct LRC-formatted lyrics text content. Overrides `route`.    |

### Events

This component does not dispatch any custom events.

### Styling

This component uses Shadow DOM, and its styles are self-contained. The component's styles are automatically applied and encapsulated, so there is no need to import any additional stylesheets.

### Custom Properties

Can be used with css `light-dark` function.

| Custom Property                            | Description                                                 |
|--------------------------------------------|-------------------------------------------------------------|
| `--outbook-lyrics--color-text`             | The color of the displayed lyrics text.                     |
| `--outbook-lyrics--color-shadow`           | The color of the text shadow applied to the lyrics.         |

## License

This component is licensed under the Apache-2.0 License.