1.1.11 • Published 5 years ago

eng-bsd-timeline-editor v1.1.11

Weekly downloads
1
License
MIT
Repository
-
Last release
5 years ago

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 nameDescriptionRequired?Example values
chunksArray of Timeline chunks (e.g. captions)YesArray: [{"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}]
configWebcap api.yml params in a json formatYesObject: (See demo source code for an example)
isRtlDisplay chunk text in right-to-left formatNoBoolean: false
isReadOnlyDisable the ability to add/update/delete captionsNoBoolean: false
onFocusCallback for chunk focus eventNoFunction: (chunk) => console.log(chunk)
classNameClassname to be applied to the component wrapper DOM elementNoString: "example-class-name"
addItemCallback for adding a chunkNoFunction: (chunk) => console.log(chunk)
updateItemCallback for updating a chunkNoFunction: (chunk) => console.log(chunk)
deleteItemCallback for deleting a chunkNoFunction: (chunk) => console.log(chunk)