# @donkeyclip/motorcortex-subtitles

> Subtitles plugin for MotorCortex

Latest version **3.1.3** (published 2023-07-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @donkeyclip/motorcortex-subtitles
pnpm add @donkeyclip/motorcortex-subtitles
yarn add @donkeyclip/motorcortex-subtitles
bun add @donkeyclip/motorcortex-subtitles
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.1.3 |
| Published | 2023-07-15 |
| First published | 2022-04-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 1 |
| Unpacked size | 32.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Donkeyclip |
| Maintainers | atrantidis, alexdor, prieston |
| Keywords | motorcortex, subtitles, motorcortex-plugin |

## Links

- npm: https://www.npmjs.com/package/@donkeyclip/motorcortex-subtitles
- Repository: https://github.com/donkeyclip/motorcortex-subtitles
- Homepage: https://github.com/donkeyclip/motorcortex-subtitles#readme
- Issues: https://github.com/donkeyclip/motorcortex-subtitles/issues
- npm.io page: https://npm.io/package/@donkeyclip/motorcortex-subtitles

## Dependencies (1)

- [parse-srt](https://npm.io/package/parse-srt.md) ^1.0.0-alpha

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 3.1.3 (latest) — 2023-07-15
- 3.1.2 — 2023-07-14
- 3.1.1 — 2022-05-05
- 3.1.0 — 2022-04-08
- 3.0.4 — 2022-04-07
- 0.0.1 — 2022-04-07

## README

# MotorCortex-Subtitles

**Table of Contents**

- [MotorCortex-Subtitles](#motorcortex-subtitles)
  - [Demo](#demo)
- [Intro / Features](#intro--features)
- [Getting Started](#getting-started)
  - [Installation](#installation)
  - [Importing and Loading](#importing-and-loading)
- [Creating Incidents](#creating-incidents)
  - [ParseText](#parsetext)
- [Adding Incidents in your clip](#adding-incidents-in-your-clip)
- [Contributing](#contributing)
- [License](#license)
- [Sponsored by](#sponsored-by)

## Demo

[Check it out here](https://donkeyclip.github.io/motorcortex-subtitles/demo/)

# Intro / Features

MotorCortex Subtitles takes the capabilities of the [parseSRT](https://www.npmjs.com/package/parse-srt) library for parsing subtitle files. 
The `ParseText` Incident can parse supported subtitle files and add them to your clip. The duration is auto-calculated from your subtitles. 

This Plugin exposes just one Incident:
- ParseText

## Subtitle Formats supported
SRT

# Getting Started
## Installation
```bash
$ npm install @donkeyclip/motorcortex-subtitles
# OR
$ yarn add @donkeyclip/motorcortex-subtitles
```

## Importing and loading
```javascript
import { loadPlugin } from "@donkeyclip/motorcortex/";
import SubtitleDef from "@donkeyclip/motorcortex-subtitles";
const SubtitlePlugin = loadPlugin(SubtitleDef);
```

# Creating Incidents

## ParseText
```javascript
const clip = new HTMLClip({
  html: `
    <div class="container"></div>`,
  css: `
  .container{
    width:100%;
    height:100%;
    position:relative;
    background:#151515;
  }
`,
  host: document.getElementById("clip"),
  containerParams: {
    width: "720px",
    height: "640px",
  },
});

const subtitle = new Subtitles.ParseText(
  {
    fontSize: 14,
    textColor: "white",
    fontFamily: "Ubuntu",
    subtitles: mySubsTextFile,
    position: "bottom",
    maxWidth: 400,
    paddingBottom: 50,
  },
  {
    selector: ".container",
    containerParams: {
      width: "720px",
      height: "640px",
    },
  }
);
```
### ParseText Attrs
| Name | Description | Default | Type |
| --------- |:-----------| :----| ------: |
| fontSize | Font size in pixels of the subtitles | 12 | number |
| textColor | The color of the subtitles | white | - |
| fontFamily | Font family of the subtiltes | 'Ubuntu' | string |
| subtitles | The subtitles loaded text | - | string |
| position | Position of the subtitles container [top, center, bottom] | bottom | string |
| maxWidth | The maximum width of the subtitles container in pixels | "100%" | number |
| paddingTop | The padding top value of the subtitles container in pixels | 0 | number |
| paddingBottom | The padding bottom value of the subtitles container in pixels | 0 | number |

#### IMPORTANT 
The container params of the subtitles clip should be the same as the parent clip.

# Adding Incidents in your clip

```javascript
clipName.addIncident(incidentName,startTime);
```

### Contributing 

In general, we follow the "fork-and-pull" Git workflow, so if you want to submit patches and additions you should follow the next steps:
1.	**Fork** the repo on GitHub
2.	**Clone** the project to your own machine
3.	**Commit** changes to your own branch
4.	**Push** your work back up to your fork
5.	Submit a **Pull request** so that we can review your changes

# License

[MIT License](https://opensource.org/licenses/MIT)

# Sponsored by
[<img src="https://presskit.donkeyclip.com/logos/donkey%20clip%20logo.svg" width=250></img>](https://donkeyclip.com)

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