3.1.3 • Published 10 months ago

@donkeyclip/motorcortex-subtitles v3.1.3

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

MotorCortex-Subtitles

Table of Contents

Demo

Check it out here

Intro / Features

MotorCortex Subtitles takes the capabilities of the parseSRT 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

$ npm install @donkeyclip/motorcortex-subtitles
# OR
$ yarn add @donkeyclip/motorcortex-subtitles

Importing and loading

import { loadPlugin } from "@donkeyclip/motorcortex/";
import SubtitleDef from "@donkeyclip/motorcortex-subtitles";
const SubtitlePlugin = loadPlugin(SubtitleDef);

Creating Incidents

ParseText

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

NameDescriptionDefaultType
fontSizeFont size in pixels of the subtitles12number
textColorThe color of the subtitleswhite-
fontFamilyFont family of the subtiltes'Ubuntu'string
subtitlesThe subtitles loaded text-string
positionPosition of the subtitles container top, center, bottombottomstring
maxWidthThe maximum width of the subtitles container in pixels"100%"number
paddingTopThe padding top value of the subtitles container in pixels0number
paddingBottomThe padding bottom value of the subtitles container in pixels0number

IMPORTANT

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

Adding Incidents in your clip

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

Sponsored by

3.1.3

10 months ago

3.1.2

10 months ago

3.1.1

2 years ago

3.1.0

2 years ago

3.0.4

2 years ago

0.0.1

2 years ago