Specs
CSS custom properties
Customize CueSync by modifying the CSS custom properties listed below.
Transcript container
| Property | Default Value | Description |
|---|
| --cs-container-bg | #fff | Transcript container background color |
| --cs-container-color | #000 | Transcript container text color |
| --cs-container-padding-x | 5px | Transcript container padding left and right |
| --cs-container-padding-y | 5px | Transcript container padding top and bottom |
| --cs-container-border-width | 1px | Transcript container border width |
| --cs-container-border-style | solid | Transcript container border style |
| --cs-container-border-color | #e9e9e9 | Transcript container border color |
| --cs-container-border-radius | 4px | Transcript container border radius |
Transcript
| Property | Default Value | Description |
|---|
| --cs-padding-x | 5px | Transcript padding left and right |
| --cs-padding-y | 5px | Transcript padding top and bottom |
| --cs-border-radius | 4px | Transcript border radius |
| --cs-hover-bg | #e3e4e5 | Transcript hover background color |
| --cs-hover-color | #000 | Transcript hover color |
| --cs-active-bg | #9ec5fe | Transcript active background color |
| --cs-active-color | #000 | Transcript active color |
| --cs-highlight-bg | transparent | Transcript highlight background color |
| --cs-highlight-color | #084298 | Transcript highlight color |
Timestamp
| Property | Default Value | Description |
|---|
| --cs-time-bg | #084298 | Timestamp background color |
| --cs-time-color | #fff | Timestamp color |
| --cs-time-border-radius | 4px | Timestamp border radius |
| --cs-time-width | auto | Timestamp width
(Automatically adjusted to match the width of the longest timestamp.) |
Javascript options
| Option | Description |
|---|
| transcriptPath | Sets the transcript file path |
| media | Sepcifies the media element for transcript highlighting and interactive control |
| displayTime | Indicates whether the timestamp should be displayed or not |
Javascript functions
| Function | Description |
|---|
| getInstance | Static method that enables you to obtain the CueSync instance associated with a DOM element. |
| getOrCreateInstance | Static method that enables you to obtain the CueSync instance associated with a DOM element or create a new one if it hasn’t been initialized. |
| redrawTime | Ensures consistent timestamp element width in CueSync by recalculating dimensions when transcripts become visible. |
| refresh | Reconfigures a CueSync instance, useful in case it was not properly initialized during the first attempt. |
| dispose | Destroys an element’s instance and removes stored data associated with the DOM element. |
HTML attributes
| HTML attribute | Javascript equivalent option | Description |
|---|
| data-cs-transcript-path | transcriptPath | Sets the transcript file path |
| data-cs-display-time | displayTime | Indicates whether the timestamp should be displayed or not |