# @beey/publish

> JavaScript library for publishing [Beey](https://www.beey.io/en/) transcriptions with recordings on third-party web pages.

Latest version **1.8.10** (published 2023-08-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @beey/publish
pnpm add @beey/publish
yarn add @beey/publish
bun add @beey/publish
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.8.10 |
| Published | 2023-08-11 |
| First published | 2022-06-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=14.0.0 |
| Dependencies | 1 |
| Unpacked size | 125.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Newton Technologies |
| Maintainers | baryska, evamach, podlomar |

## Links

- npm: https://www.npmjs.com/package/@beey/publish
- Repository: https://github.com/newtontechnologies/beey-publish
- Homepage: https://github.com/newtontechnologies/beey-publish#readme
- Issues: https://github.com/newtontechnologies/beey-publish/issues
- npm.io page: https://npm.io/package/@beey/publish

## Dependencies (1)

- [redom](https://npm.io/package/redom.md) ^3.27.1

## Recent versions

- 1.8.10 (latest) — 2023-08-11
- 1.8.9 — 2023-04-04
- 1.8.8 — 2023-01-03
- 1.8.7 — 2022-12-06
- 1.8.6 — 2022-11-01
- 1.8.5 — 2022-10-03
- 1.8.4 — 2022-09-19
- 1.8.2 — 2022-09-07
- 1.8.1 — 2022-09-06
- 1.8.0 — 2022-08-25
- 1.7.0 — 2022-07-21
- 1.6.3 — 2022-07-12
- 1.6.2 — 2022-06-22
- 1.6.1 — 2022-06-22
- 1.6.0 — 2022-06-22

## README

# Beey Publish

JavaScript library for publishing [Beey](https://www.beey.io/en/) transcriptions with recordings on third-party web pages.

## 🔌 Include in your project 

Install with

```
npm install @beey/publish
```

or 

```
yarn add @beey/publish
```

or use CDN (see below)

```
https://unpkg.com/@beey/publish@latest
```

Include using NPM or Yarn

```js
import BeeyPublish from '@beey/publish';
import '@beey/publish/dist/beey-publish.css';
```

or CDN

```html
<link rel="stylesheet" href="https://unpkg.com/@beey/publish@latest/dist/beey-publish.min.css" />

<script type="module">
  import BeeyPublish from 'https://unpkg.com/@beey/publish@latest/dist/beey-publish.min.js';
  
  // ...
</script>
```

## 🔨 Usage

This library uses the TRSX format for transcriptions.

```js
const container = document.querySelector('#publish-container');

const publish = new BeeyPublish(container, {
  media: {
    url: '<url of audio/video file>'
  },
});

await publish.loadTrsx({
  url: '<url of TRSX file>',
});
```

You can also load TRSX as a string:

```js
await publish.loadTrsx({
  content: '<?xml ...',
});
```

If you want to use player and transcription separately, specify two containers:

```js
const publish = new BeeyPublish(
  {
    playerParent: playerContainer,
    transcriptParent: transcriptContainer,
  }, 
  {
    media: {
      // ...
    },
  },
);
```
### Media player control
Accessing the media player for programmatic control.

E.g. change volume programmatically (number in unit interval [0,1]):

```js
publish.mediaPlayer.volume = 0.3
```
### Styling keywords

Adding keywords for highlighting in CSS:

```js
publish.loadTrsx({
  url: '<url of TRSX file>'
}).then(() => fetch('<url of keywords JSON>'))
  .then((resp) => resp.json())
  .then((json) => publish.attachKeywords(json))
```

Example of keywords JSON, CSS styles to be added according to id with prefix pkw- (e.g. pkw-entity-person)

```json
[
  {
    "text": "Tom Cruise",
    "group": {
      "id": "entity-person",
      "label": "Person"
    },
    "mentions": [
      { "indices": [31, 32] },
      { "indices": [138, 139] },
      { "indices": [461, 462] },
      { "speakerId": 2,
        "accent" ["role", "surname"]
      }
    ]
  },
  {
    "text": "Top Gun",
    "group": {
      "id": "entity-movie",
      "label": "Movie"
    },
    "mentions": [
      { "indices": [17, 18] },
      { "indices": [66, 67] },
      { "speakerId": 1,
        "accent": "firstname"
      }
    ]
  },
  {
    "text": "Václav Rybář",
    "group": {
      "id": "entity-guest",
      "label": "Host"
    },
    "mentions": [
      { "indices": [51, 52] },
      { "speakerId": 1 }
    ]
  },
   {
    "text": "republika",
    "group": [
      {
        "id": "#E0id1",
        "label": "Česko"
      },
      {
        "id": "#E0M",
        "label": "Česko"
      }
    ],
    "mentions": [
      { "indices": [294, 295] },
      { "indices": [498] }
    ]
  },
]
```
It is possible to style speaker's parts (first name, surname and role) separately. If needed, add "accent" property to keyword JSON as showed above. Accent can be either array of strings or string ("firstname", "surname" or "role"). If accent is not present, all three speaker's parts will get the CSS class.

To style a keyword group with id `entity-person` in phrases, create a CSS class `pkw-entity-person` and apply CSS accordingly:

```css
.pkw-entity-person {
  color: blue;
  background-color: yellow;
}
```

To style a keyword group with id `entity-guest` in a speaker, create a CSS class `skw-entity-guest` and apply CSS accordingly:

```css
.skw-entity-quest {
  color: white;
  background-color: orange;
}
```

### Localization

Changing localization (to Czech, Polish or Slovak):

```html
<script type="module">
import cz from 'https://unpkg.com/@beey/publish@latest/dist/locale/cs-CZ.json' assert {type: 'json'};
const publish = new BeeyPublish(container, {
  media: {
    url: '<url of audio/video file>',
  },
  subtitlesUrl: '<url of vtt file>',
  locale: cz
});

await publish.loadTrsx({
  url: '<url of TRSX file>',
});
</script>
```

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