1.1.11 • Published 5 years ago
eng-bsd-timeline-editor v1.1.11
BSD Timeline Editor
This library allows you to include a Timeline editor prodominantly used for editing captions.
Usage:
import React from "react";
import BSDTimelineEditor from "eng-bsd-timeline-editor"
const MyComponent = ({name}) => (
<BSDTimelineEditor
chunks={[]}
config={<webcapJson>}
isRtl={false}
isReadOnly={false}
className="example-class-name"
onFocus={item => console.log('focused', item)}
addItem={item => console.log('added a new item')}
updateItem={item => console.log('updated', item)}
deleteItem={item => console.log('deleted', item)}
/>
);
export default MyComponent;
Props
Prop name | Description | Required? | Example values |
---|---|---|---|
chunks | Array of Timeline chunks (e.g. captions) | Yes | Array: [{"id":547,"captionURL":"/webcap/index.html","startTime":"00:02:00","endTime":"00:07:00","captionData":{"legibilityBackground":"none","lineSpacing": "compressed",verticalPosition":"middle","captionDataId":816,"scriptType":"reith","caption":"chapter","palette":"default","text":"hello","animate":"both"},"captionId":1}] |
config | Webcap api.yml params in a json format | Yes | Object: (See demo source code for an example) |
isRtl | Display chunk text in right-to-left format | No | Boolean: false |
isReadOnly | Disable the ability to add/update/delete captions | No | Boolean: false |
onFocus | Callback for chunk focus event | No | Function: (chunk) => console.log(chunk) |
className | Classname to be applied to the component wrapper DOM element | No | String: "example-class-name" |
addItem | Callback for adding a chunk | No | Function: (chunk) => console.log(chunk) |
updateItem | Callback for updating a chunk | No | Function: (chunk) => console.log(chunk) |
deleteItem | Callback for deleting a chunk | No | Function: (chunk) => console.log(chunk) |
1.1.11
5 years ago