@kissmybutton/motorcortex-subtitles v3.0.4

MotorCortex Subtitles

Subtitle library as a MotorCortex Incident

Installation

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

import Subtitle from "@kissmybutton/motorcortex-subtitles";

Key Concepts / Features

MotorCortex Subtitles takes the capabilities of Subtitle library of parsing subtilte files. The library exposes just one Incident with the name "ParseText" which can parse supported subtitle files and add them to your clip. The duration is auto calculated from your subtitles. The container params of the subtitles clip should be the same with the parent clip.

Subtitle Formats supported

SRT or WebVTT

Documentation

Import and load the plugin to MotorCortex

import { HTMLClip, loadPlugin } from "@kissmybutton/motorcortex/";
import mySubsTextFile from "./subs.srt.js";
import SubtitlesDefinition from "@kissmybutton/motorcortex-subtitles/";
const Subtitles = loadPlugin(SubtitlesDefinition);
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",
    },
  }
);

clip.addIncident(subtitle, 0);
clip.play();

Attributes

Demo

https://kissmybutton.github.io/motorcortex-subtitles/demo/

License

MIT License