- CueSync is a JavaScript library designed to simplify the integration of interactive transcripts into multimedia content.
+ CueSync is a JavaScript library that simplifies the integration of interactive transcripts into your media projects.
## Table of contents
diff --git a/build/rollup.config.mjs b/build/rollup.config.mjs
index e0631f9..829dc1f 100644
--- a/build/rollup.config.mjs
+++ b/build/rollup.config.mjs
@@ -2,6 +2,7 @@ import path from 'node:path'
import process from 'node:process'
import { fileURLToPath } from 'node:url'
import { babel } from '@rollup/plugin-babel'
+import css from 'rollup-plugin-import-css'
import banner from './banner.mjs'
const __dirname = path.dirname(fileURLToPath(import.meta.url))
@@ -11,6 +12,9 @@ const ESM = process.env.ESM === 'true'
const destinationFile = `cuesync${ESM ? '.esm' : ''}`
const external = []
const plugins = [
+ css({
+ minify: true
+ }),
babel({
// Only transpile our source code
exclude: 'node_modules/**',
diff --git a/hugo.yml b/hugo.yml
index 323c4b9..f66c06d 100644
--- a/hugo.yml
+++ b/hugo.yml
@@ -24,7 +24,7 @@ publishDir: "_site"
module:
mounts:
- source: dist
- target: static/1.0/dist
+ target: static/2.0/dist
- source: site/content
target: content
- source: site/static
@@ -47,8 +47,8 @@ related:
toLower: false
params:
- description: "CueSync is a JavaScript library designed to simplify the integration of interactive transcripts into multimedia content."
+ description: "CueSync is a JavaScript library that simplifies the integration of interactive transcripts into your media projects."
authors: "Neeraj Kumar Das"
- current_version: "1.0.0-alpha1"
- docs_version: "1.0"
+ current_version: "2.0.0-alpha1"
+ docs_version: "2.0"
diff --git a/js/src/cuesync.js b/js/src/cuesync.js
index 6780f17..eff13cb 100644
--- a/js/src/cuesync.js
+++ b/js/src/cuesync.js
@@ -4,65 +4,324 @@
* Licensed under MIT (https://github.com/cuesync/cuesync.github.io/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
+import styles from '../../dist/css/cuesync.css'
-import BaseComponent from './helpers/base-component.js'
+export default class CueSync extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({ mode: 'open' })
-const NAME = 'cuesync'
+ this._timestampMaxWidth = 0
+ this._pendingRefresh = false
+ this._config = {}
+ this._languages = []
+ }
+
+ static get observedAttributes() {
+ return ['transcript-path', 'media', 'layout', 'show-timestamp', 'auto-scroll', 'allow-settings', 'theme']
+ }
-class CueSync extends BaseComponent {
- constructor(element, config) {
- super(element)
+ static get styles() {
+ return styles
+ }
- this._element = element
- this._config = this._getConfig(config)
- this._autoScroll = true
- this._timeMaxWidth = 0
- this.refresh()
+ _getConfig() {
+ return {
+ transcriptPath: this.getAttribute('transcript-path')?.split(','),
+ media: document.querySelector(this.getAttribute('media')),
+ layout: this.getAttribute('layout') === 'paragraph' ? 'paragraph' : 'stacked', // Default to 'stacked'
+ showTimestamp: this.getAttribute('show-timestamp') !== 'false', // Default to true
+ autoScroll: this.getAttribute('auto-scroll') !== 'false', // Default to true
+ allowSettings: this.getAttribute('allow-settings') !== 'false', // Default to true
+ theme: this.getAttribute('theme') === 'light' || this.getAttribute('theme') === 'dark' ? this.getAttribute('theme') : 'auto' // Default to 'auto'
+ }
}
- static get NAME() {
- return NAME
+ connectedCallback() {
+ this._config = this._getConfig()
+ this._renderComponent()
+ this._requestRefresh()
}
- async refresh() {
- let transcripts = []
- let cuesCollection = []
+ attributeChangedCallback(name, oldValue, newValue) {
+ this._updateConfig(name, newValue)
- // Create an array of transcript file paths
- const transcriptFilePaths = this._getTranscriptFilePaths()
+ // Dispatch a custom event based on the attribute that was changed
+ this._dispatchCustomEvent(name, newValue)
- // Create an array of transcript file contents
- if (transcriptFilePaths.length) {
- transcripts = await Promise.all(
- transcriptFilePaths.map(t => this._fetchTranscript(t))
- )
+ // Handle lightweight UI updates without a full refresh
+ if (['theme', 'layout', 'show-timestamp', 'auto-scroll'].includes(name)) {
+ this._applyAttributeChange(name)
} else {
- throw new Error('No transcript file paths found')
+ this._renderComponent()
+ this._requestRefresh()
}
+ }
- // Create an array of parsed transcripts
- if (transcripts.length) {
- cuesCollection = transcripts.map(t => this._parseTranscript(t))
- } else {
- throw new Error('No transcript content retrieved')
+ _updateConfig(name, value) {
+ const updateMap = {
+ 'transcript-path': () => {
+ this._config.transcriptPath = value.split(',')
+ },
+ media: () => {
+ this._config.media = document.querySelector(value)
+ },
+ layout: () => {
+ this._config.layout = value === 'paragraph' ? 'paragraph' : 'stacked'
+ },
+ 'show-timestamp': () => {
+ this._config.showTimestamp = value !== 'false'
+ },
+ 'auto-scroll': () => {
+ this._config.autoScroll = value !== 'false'
+ },
+ 'allow-settings': () => {
+ this._config.allowSettings = value !== 'false'
+ },
+ theme: () => {
+ this._config.theme = value === 'light' || value === 'dark' ? value : 'auto'
+ }
+ }
+
+ if (updateMap[name]) {
+ updateMap[name]()
}
+ }
+
+ _dispatchCustomEvent(name, newValue) {
+ const eventName = `${name}-changed` // e.g., 'show-timestamp-changed'
+ const eventDetail = { newValue } // Include the new value in the event detail
+
+ const event = new CustomEvent(eventName, {
+ detail: eventDetail,
+ bubbles: true, // Allow the event to bubble up the DOM
+ composed: true // Allow the event to pass through shadow DOM boundaries
+ })
+
+ this.dispatchEvent(event)
+ }
- // Create transcript lines and add them to the container
- if (cuesCollection.length) {
- this._createTranscriptLines(cuesCollection)
+ _applyAttributeChange(name) {
+ switch (name) {
+ case 'theme': {
+ this._changeTheme()
+ break
+ }
- if (this._timeMaxWidth) {
- this._element.style.setProperty('--cs-time-width', `${this._timeMaxWidth}px`)
+ case 'layout': {
+ this._changeLayout()
+ break
}
- this._element.addEventListener('scroll', () => {
- if (this._autoScroll) {
- this._autoScroll = false
- }
+ case 'show-timestamp': {
+ this._changeTimestamp()
+ break
+ }
+
+ case 'auto-scroll': {
+ this._changeAutoScroll()
+ break
+ }
+
+ default: {
+ console.warn(`Unhandled attribute change: ${name}`) // eslint-disable-line no-console
+ }
+ }
+ }
+
+ _changeTheme() {
+ const themeOptions = this.shadowRoot.querySelectorAll('input[type="radio"][name="theme"]')
+
+ for (const option of themeOptions) {
+ option.checked = option.value === this._config.theme || (this._config.theme === undefined && option.value === 'auto')
+ }
+ }
+
+ _changeLayout() {
+ const layoutOptions = this.shadowRoot.querySelectorAll('input[type="radio"][name="layout"]')
+
+ for (const option of layoutOptions) {
+ option.checked = option.value === this._config.layout
+ }
+
+ const cueElements = this.shadowRoot.querySelectorAll('.cue')
+
+ for (const cueElement of cueElements) {
+ cueElement.classList.toggle('paragraph', this._config.layout === 'paragraph')
+ }
+
+ this.redrawTime()
+ }
+
+ _changeTimestamp() {
+ const timestampCheckbox = this.shadowRoot.getElementById('timestamp-toggle')
+ if (timestampCheckbox) {
+ timestampCheckbox.checked = this._config.showTimestamp
+ }
+
+ const timestamps = this.shadowRoot.querySelectorAll('.timestamp')
+ for (const timestamp of timestamps) {
+ timestamp.style.display = this._config.showTimestamp ? 'inline-block' : 'none'
+ }
+
+ this.redrawTime()
+ }
+
+ _changeAutoScroll() {
+ const autoScrollCheckbox = this.shadowRoot.getElementById('auto-scroll-toggle')
+ if (autoScrollCheckbox) {
+ autoScrollCheckbox.checked = this._config.autoScroll
+ }
+ }
+
+ _renderComponent() {
+ const { allowSettings } = this._config
+ const settingsHTML = allowSettings ?
+ `
+
`
-with the class `transcript-container`. This div will display the interactive transcript of the media.
-
-```html
-
-
-
-
-
-```
-
-Next, initialize CueSync with JavaScript by passing the transcript container as the first argument and options as the second argument.
-The options must include the transcript file path and the media element.
-
-```javascript
-const videoTranscript = new cuesync.CueSync(
- // Transcript container
- document.getElementById('video-transcript'),
-
- // Options
- {
- transcriptPath: '/assets/transcripts/natgeo.vtt',
- media: document.getElementById('natGeoVideo')
- }
-)
-```
-
-That's it! Your interactive transcript is now ready.
-
-Hit the play button and watch the phrases in the transcript come to life, elegantly highlighted as they're spoken.
-Feel free to click on any phrase in the transcript to seamlessly navigate to that specific segment of the video.
-
-Video
-
-
-
-Transcript
-
-
-
-
-
-## Display time
-
-To display the transcript timestamp, pass `displayTime: true` as an option when initializing.
-
-{{< example codeId="code1" >}}
-
-
-
-
-
-##split##
-
-{{< /example >}}
-
-
-
-## Setting options as HTML attributes
-
-The options `transcriptPath` and `displayTime` can be passed as HTML data attributes `data-cs-transcript-path`
-and `data-cs-display-time`, respectively, on the `.transcript-container`.
-
-{{< example codeId="code2" >}}
-
-
-
-
-
-##split##
-
-{{< /example >}}
-
-
-
-## Customization
-
-Customize CueSync by modifying the CSS custom properties listed here.
-
-{{< example codeId="code5" >}}
-
-
-
-
-
-
-
-##split##
-
-{{< /example >}}
-
-
-
-## Javascript
-
-### getInstance()
-`getInstance()` is a static method that enables you to obtain the CueSync instance associated with a DOM element.
-
- ```javascript
- const cueSyncInstance = cuesync.CueSync.getInstance('#video-transcript')
-```
-
-
-
-### getOrCreateInstance()
-`getOrCreateInstance()` is a 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.
-
- ```javascript
- const cueSyncInstance = cuesync.CueSync.getOrCreateInstance('#video-transcript')
-```
-
-
-
-### Non-visible transcripts
-CueSync automatically adjusts the width of timestamp elements to match that of the longest timestamp,
-ensuring uniformity across all elements.
-However, since dimensions cannot be accurately determined on elements that aren't visible,
-if you instantiate CueSync on transcripts that are hidden, you may need to call the `redrawTime()` method once they become visible.
-This ensures consistency in the width of all timestamp elements.
-
- ```javascript
- const cueSyncInstance = cuesync.CueSync.getInstance('#video-transcript')
- cueSyncInstance.redrawTime()
-```
-
-
-
-### refresh()
-`refresh()` — Reconfigures a CueSync instance, useful in case it was not properly initialized during the first attempt.
-
- ```javascript
- const cueSyncInstance = cuesync.CueSync.getInstance('#video-transcript')
- cueSyncInstance.refresh()
-```
-
-
-
-### dispose()
-`dispose()` - Destroys an element's instance and removes stored data associated with the DOM element.
-
- ```javascript
- const cueSyncInstance = cuesync.CueSync.getInstance('#video-transcript')
- cueSyncInstance.dispose()
-```
diff --git a/site/content/1.0/specs.md b/site/content/1.0/specs.md
deleted file mode 100644
index 3eeda23..0000000
--- a/site/content/1.0/specs.md
+++ /dev/null
@@ -1,252 +0,0 @@
----
-layout: docs
-title: Specs
-toc: true
-aliases:
- - "/1.0/specs/"
-description: CueSync is a JavaScript library designed to simplify the integration of interactive transcripts into multimedia content. Customize and configure CueSync to fit your needs. This page lists all available CSS custom properties, JavaScript initialization options, and HTML attributes you can use to control the behavior and appearance of CueSync.
----
-
-## 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.)
-
-
-
-
-
-{{< squiggle >}}
-
-### 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.
-
-
-
-
-
-{{< squiggle >}}
-
-### 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
-
-
-
-
\ No newline at end of file
diff --git a/site/content/2.0/examples.md b/site/content/2.0/examples.md
new file mode 100644
index 0000000..6c2f432
--- /dev/null
+++ b/site/content/2.0/examples.md
@@ -0,0 +1,367 @@
+---
+layout: docs
+title: Examples
+aliases:
+ - "/2.0/examples/"
+ - "/examples/"
+toc: true
+description: CueSync is a JavaScript library that simplifies the integration of interactive transcripts into your media projects. Explore different ways to use CueSync with real examples. Each example shows a variation of the interactive transcript along with the code you need to implement it.
+---
+
+## Getting Started
+
+Assuming you've added your media (audio or video) to your page, have the transcript ready, and have correctly included
+the required CueSync JavaScript file, you're ready to use the component.
+
+Simply add a `` element with the `transcript-path` attribute **set to the path of your transcript file**,
+and the `media` attribute **set to a CSS selector that matches your media element (e.g. #videoId or .audio-player)**.
+
+```html
+
+
+
+
+
+```
+
+That’s it — your interactive transcript is ready to go!
+
+Hit play and watch the transcript come to life, elegantly highlighting each phrase (Cue) as it's spoken.
+Click on any Cue to jump to that moment in the media.
+
+Video
+
+
+
+Transcript
+
+
+
+{{< squiggle >}}
+
+## Transcript Formats (VTT and SRT)
+Before exploring the different options available with CueSync, it's important to understand the supported
+transcript formats.
+
+CueSync supports two common transcript file formats: `VTT (WebVTT)` and `SRT (SubRip)`. These formats define
+the timing and text of each spoken segment, allowing CueSync to sync them precisely with your media.
+
+It is important to follow their structure strictly, or the transcript may not render correctly.
+
+
+
+### VTT (WebVTT)
+VTT is a flexible and modern format, commonly used for captions and interactive transcripts on the web.
+
+**Basic structure:**
+* Begins with **WEBVTT** **(CueSync works even if this line is omitted)**
+* Each block contains a **timestamp** and **text**
+* A **cue number** is optional
+* Timestamps use a **period (.)** as the decimal separator (e.g., **00:01:00.500**)
+* Language metadata (e.g., `Language: English`) is optionally supported by CueSync for language selection in
+multilingual transcripts
+* CueSync currently **does not support styling or positioning lines** — only timing and text are allowed
+
+```text
+WEBVTT
+Language: Hindi
+
+00:00:02 --> 00:00:03
+कीट
+
+00:00:03 --> 00:00:06
+खुरदरे, गूदेदार
+
+00:00:06 --> 00:00:09
+ओह, वह मुलायम है
+```
+
+
+
+### SRT (SubRip)
+SRT is a simpler and widely used subtitle format, especially in video production and distribution.
+
+**Basic structure:**
+* Each block starts with a **cue number** **(CueSync works even if this is omitted)**
+* Timestamps use a **comma (,)** as the decimal separator (e.g., **00:01:00,500**)
+* Each timestamp line is followed by the text to display
+* **Metadata is not officially supported** — however, if a `Language:` line is included, **CueSync will read it and enable language selection**
+
+```text
+1
+00:00:02 --> 00:00:03
+bugs
+
+2
+00:00:03 --> 00:00:06
+give me the scaly the squishy
+
+3
+00:00:06 --> 00:00:09
+oh she's fluffy
+```
+
+{{< squiggle >}}
+
+## Layout
+CueSync offers two layout options for displaying the transcript: `stacked` and `paragraph`, with `stacked` being
+the default.
+
+Users can switch between these layouts at any time from the Settings panel.
+
+As a developer, you can also set a default layout for your users using the `layout` attribute on the
+`` element. This attribute accepts the values `'stacked'` or `'paragraph'`, respectively, to choose
+the desired layout.
+
+{{< example codeId="code1" >}}
+
+
+
+
+
+{{< /example >}}
+
+
+
+## Timestamps
+By default, CueSync displays timestamps for each segment of the transcript. Users can show or hide the timestamps
+at any time from the Settings panel.
+
+As a developer, you can control the visibility of timestamps for your users by using the `show-timestamp` attribute
+on the `` element. This attribute accepts `'true'` to show timestamps and `'false'` to hide them.
+
+{{< example codeId="code2" >}}
+
+
+
+
+
+{{< /example >}}
+
+
+
+## Auto Scroll
+By default, CueSync enables auto-scroll, which automatically brings the currently spoken phrase (Cue)
+into view as the media plays. Users can turn this feature on or off at any time from the Settings panel.
+
+As a developer, you can control the default behavior using the `auto-scroll` attribute on the ``
+element. This attribute accepts `'true'` to enable auto-scroll and `'false'` to disable it.
+
+{{< example codeId="code3" >}}
+
+
+
+
+
+{{< /example >}}
+
+
+
+## Theme
+CueSync offers three theme options: `auto`, `light`, and `dark`, with `auto` being the default.
+The `auto` theme adapts to the user's device settings, switching between light or dark mode accordingly.
+
+Users can switch between these themes at any time from the Settings panel.
+
+As a developer, you can set a default theme for your users using the `theme` attribute on the `` element.
+This attribute accepts the values `'auto'`, `'light'`, or `'dark'`.
+
+{{< example codeId="code4" >}}
+
+
+
+
+
+{{< /example >}}
+
+
+
+## Settings
+The Settings feature is enabled by default in CueSync, allowing users to switch themes, toggle auto-scroll,
+change layouts, show or hide timestamps, and select transcript languages.
+
+If you prefer not to offer these customization options, you can disable the Settings feature by using the
+`allow-settings` attribute on the `` element. This will prevent the settings button from appearing
+in the toolbar.
+
+This attribute accepts `'true'` to enable settings and `'false'` to disable it.
+
+{{< example codeId="code5" >}}
+
+
+
+
+
+{{< /example >}}
+
+
+
+## Multilingual Transcripts
+If you have transcripts in multiple languages for a media element, you can provide the paths to each
+transcript file **(comma-separated)** in the `transcript-path` attribute. The Settings panel will automatically
+display an additional option, allowing users to select or hide any language they prefer.
+
+CueSync determines the language name from the `Language:` metadata in each `VTT` or `SRT` file. If this metadata
+is missing, the language selection may not appear in the Settings panel.
+
+To ensure a smooth multilingual experience, always include the `Language:` field at the top of each `VTT` or `SRT`
+file (e.g., Language: English, Language: Hindi, etc.).
+
+{{< example codeId="code6" >}}
+
+
+
+
+
+{{< /example >}}
+
+
+
+## Customization
+
+You can customize the appearance of CueSync by modifying the CSS custom properties listed here.
+
+{{< example codeId="code7" >}}
+
+
+
+
+
+
+
+{{< /example >}}
+
+
+
+## Javascript
+The `` web component is designed to work declaratively via HTML attributes, but it also exposes a
+few useful ways to interact with it via JavaScript.
+
+
+
+### Accessing the Component
+You can select the element using `document.querySelector()` (or any standard DOM method).
+
+```javascript
+const cueSync = document.querySelector('cue-sync');
+```
+
+
+
+### Attributes You Can Modify Dynamically
+HTML attributes listed here can be updated via
+JavaScript using 'setAttribute()'.
+
+```javascript
+const cueSync = document.querySelector('cue-sync');
+
+cueSync.setAttribute('layout', 'paragraph');
+cueSync.setAttribute('theme', 'dark');
+```
+
+
+
+### Custom Events
+CueSync dispatches custom events listed here
+whenever key attributes change.
+
+```javascript
+const cueSync = document.querySelector('cue-sync');
+
+cueSync.addEventListener('layout-changed', e => {
+ console.log('Layout changed to:', e.detail.newValue);
+});
+```
+
+
+
+### Public Functions
+#### redrawTime()
+Recalculates the width of the timestamp column. Useful if fonts or styles change.
+
+```javascript
+const cueSync = document.querySelector('cue-sync');
+
+cueSync.redrawTime();
+```
+
+
+
+### Please Note
+* Internal state and rendering are handled automatically based on attributes.
+* You don't need to call an initialization function — the component sets itself up when added to the DOM.
+* Shadow DOM is used (`mode: 'open'`), so you can access `cueSync.shadowRoot` if absolutely necessary, though
+this is not recommended.
diff --git a/site/content/1.0/installation.md b/site/content/2.0/installation.md
similarity index 54%
rename from site/content/1.0/installation.md
rename to site/content/2.0/installation.md
index cb52d3a..8a3b269 100644
--- a/site/content/1.0/installation.md
+++ b/site/content/2.0/installation.md
@@ -2,9 +2,10 @@
layout: docs
title: Installation
aliases:
- - "/1.0/installation/"
+ - "/2.0/installation/"
+ - "/installation/"
toc: true
-description: CueSync is a JavaScript library designed to simplify the integration of interactive transcripts into multimedia content. We offer three convenient options to integrate CueSync into your multimedia content. Choose the one that best fits your workflow.
+description: CueSync is a JavaScript library that simplifies the integration of interactive transcripts into your media projects. We offer three convenient options to integrate CueSync into your multimedia content. Choose the one that best fits your workflow.
---
## Installation
@@ -13,7 +14,7 @@ description: CueSync is a JavaScript library designed to simplify the integratio
### CDN
-Use CueSync instantly by including its CSS and JavaScript files directly from a Content Delivery Network (CDN).
+Use CueSync instantly by including its JavaScript file directly from a Content Delivery Network (CDN).
This option allows you to link to the files hosted on a remote server, ensuring quick and easy integration into your project.
You can choose from popular CDN providers like `jsDelivr` or `unpkg` to access CueSync’s resources seamlessly.
This method is convenient and ideal for those who want a straightforward integration process.
@@ -36,46 +37,22 @@ This method is convenient and ideal for those who want a straightforward integra
-
-
-Styles
-
-```html
-
-
-```
-
-Scripts
+
```html
-
```
-
-
-Styles
-
-```html
-
-
-```
-
-Scripts
+
```html
-
```
@@ -99,21 +76,16 @@ Import CueSync JS
import * as cuesync from '@cuesync/cuesync'
```
-Import CueSync SCSS in your SCSS file
-```scss
-@import "~@cuesync/cuesync/scss/cuesync";
-```
-
{{< squiggle >}}
### Download
-Download the pre-compiled CSS and JavaScript files of CueSync directly to your system. This option is suitable for
+Download the pre-compiled JavaScript file of CueSync directly to your system. This option is suitable for
developers who prefer to have local copies of the required files and manually link them in their project’s code.
-Download v1.0.0-alpha1
+ href="https://github.com/cuesync/cuesync.github.io/releases/download/v2.0.0-alpha1/cuesync-2.0.0-alpha1-dist.zip" download>
+Download v2.0.0-alpha1
@@ -121,4 +93,5 @@ Download v1.0.0-alpha1
## Next steps
-Explore CueSync's capabilities in action! Head over to the [Examples](/{{< docs_version >}}/examples) page for usage scenarios, code snippets, and examples.
+Explore CueSync’s capabilities in action!
+Head over to the [Examples](/{{< docs_version >}}/examples) page to get started — you'll find usage scenarios, helpful code snippets, and live examples to guide you.
\ No newline at end of file
diff --git a/site/content/2.0/specs.md b/site/content/2.0/specs.md
new file mode 100644
index 0000000..9c13ae8
--- /dev/null
+++ b/site/content/2.0/specs.md
@@ -0,0 +1,439 @@
+---
+layout: docs
+title: Specs
+aliases:
+ - "/2.0/specs/"
+ - "/specs/"
+version: "2.0"
+toc: true
+aliases:
+ - "/1.0/specs/"
+description: CueSync is a JavaScript library that simplifies the integration of interactive transcripts into your media projects. Customize and configure CueSync to fit your needs. This page lists all available CSS custom properties, JavaScript initialization options, and HTML attributes you can use to control the behavior and appearance of CueSync.
+---
+
+## Specs
+ This page lists and explains all configurable aspects of the CueSync component — including:
+* CSS custom properties for customizing styles and layout
+* HTML attributes for declarative configuration
+* JavaScript functions for runtime control
+* Custom events emitted by the component for interactivity and integration
+
+Use this guide to fully customize and integrate CueSync into your project, whether you're tweaking the visuals or
+wiring it up with JavaScript.
+
+
+
+## CSS custom properties
+Customize CueSync’s appearance by modifying the CSS custom properties listed below.
+
+
+
+### CueSync (Main Container)
+
+
+
+
+
Property
+
Default Value
+
Description
+
+
+
Light or Auto Theme
+
Dark Theme
+
+
+
+
+
--cs-border-width
+
1px
+
CueSync border width
+
+
+
--cs-border-style
+
solid
+
CueSync border style
+
+
+
--cs-border-color
+
#e9e9e9
+
#495057
+
CueSync border color
+
+
+
--cs-border-radius
+
10px
+
CueSync border radius
+
+
+
+
+
+
+
+### Toolbar and Settings
+
+
+
+
+
Property
+
Default Value
+
Description
+
+
+
Light or Auto Theme
+
Dark Theme
+
+
+
+
+
--cs-toolbar-bg
+
#fff
+
#16191d
+
Toolbar background color
+
+
+
--cs-toolbar-color
+
#000
+
#ced4da
+
Toolbar color
+
+
+
--cs-toolbar-px
+
15px
+
Toolbar padding left and right
+
+
+
--cs-toolbar-py
+
8px
+
Toolbar padding top and bottom
+
+
+
--cs-settings-shadow-opacity
+
.1
+
1
+
Settings menu shadow opacity
+
+
+
+
+
+
+
+### Transcript
+
+
+
+
+
Property
+
Default Value
+
Description
+
+
+
Light or Auto Theme
+
Dark Theme
+
+
+
+
+
--cs-transcript-bg
+
#fff
+
#16191d
+
Transcript background color
+
+
+
--cs-transcript-color
+
#000
+
#ced4da
+
Transcript text color
+
+
+
+
+
+
+
+### Cue
+
+
+
+
+
Property
+
Default Value
+
Description
+
+
+
Light or Auto Theme
+
Dark Theme
+
+
+
+
+
--cs-cue-px
+
15px
+
Cue padding left and right in Stacked layout
+
+
+
--cs-cue-py
+
5px
+
Cue padding top and bottom in Stacked layout
+
+
+
--cs-cue-paragraph-px
+
5px
+
Cue padding left and right in Paragraph layout
+
+
+
--cs-cue-paragraph-py
+
5px
+
Cue padding top and bottom in Paragraph layout
+
+
+
--cs-cue-hover-bg
+
#f2f2f2
+
#252525
+
Cue hover background color
+
+
+
--cs-cue-hover-color
+
#000
+
#ced4da
+
Cue hover text color
+
+
+
--cs-cue-active-bg
+
#def1ff
+
#032b48
+
Cue active background color
+
+
+
--cs-cue-active-color
+
#044ba7
+
#def1ff
+
Cue active text color
+
+
+
--cs-cue-highlight-bg
+
transparent
+
transparent
+
Cue highlight background color
+
+
+
--cs-cue-highlight-color
+
#044ba7
+
#def1ff
+
Cue highlight text color
+
+
+
+
+
+
+
+### Cue Text
+
+
+
+
+
Property
+
Default Value
+
Description
+
+
+
+
+
--cs-cue-text-px
+
5px
+
Cue text padding left and right
+
+
+
--cs-cue-text-py
+
5px
+
Cue text padding top and bottom
+
+
+
+
+
+
+
+### Timestamp
+
+
+
+
+
Property
+
Default Value
+
Description
+
+
+
Light or Auto Theme
+
Dark Theme
+
+
+
+
+
--cs-timestamp-bg
+
#def1ff
+
#032b48
+
Timestamp background color
+
+
+
--cs-timestamp-color
+
#044ba7
+
#def1ff
+
Timestamp color
+
+
+
--cs-timestamp-border-radius
+
5px
+
Timestamp border radius
+
+
+
--cs-timestamp-width
+
auto
+
Timestamp width (Automatically adjusted to match the width of the longest timestamp.)
+
+
+
--cs-timestamp-px
+
5px
+
Timestamp padding left and right
+
+
+
--cs-timestamp-py
+
5px
+
Timestamp padding top and bottom
+
+
+
+
+
+{{< squiggle >}}
+
+## Javascript
+Control CueSync using the JavaScript functions and custom events listed below.
+
+
+
+### Custom Events
+
+
+
+
+
Event Name
+
Triggered When...
+
event.detail.newValue contains
+
+
+
+
+
layout-changed
+
Layout is changed
+
'stacked' or 'paragraph'
+
+
+
show-timestamp-changed
+
Timestamp visibility is changed
+
true or false
+
+
+
auto-scroll-changed
+
Auto scroll setting is changed
+
true or false
+
+
+
theme-changed
+
Theme is changed
+
'auto', 'light', 'dark'
+
+
+
transcript-path-changed
+
Transcript paths are updated
+
string
+
+
+
media-changed
+
Media target is updated
+
string (selector)
+
+
+
allow-settings-changed
+
Allow Settings is changed
+
true or false
+
+
+
+
+
+
+
+### Functions
+
+
+
+
+
Function
+
Description
+
+
+
+
+
redrawTime()
+
Recalculates the width of the timestamp column. Useful if fonts or styles change.
+
+
+
+
+
+{{< squiggle >}}
+
+## HTML attributes
+Configure CueSync directly in your markup using the HTML attributes listed below.
+
+
+
+
+
+
Attribute
+
Type
+
Description
+
+
+
+
+
transcript-path
+
string
+
Comma-separated paths to transcript files (VTT/SRT)
+
+
+
media
+
string
+
CSS selector for the associated <video> or <audio> element
+
+
+
layout
+
string
+
'stacked' or 'paragraph' (default is 'stacked')
+
+
+
show-timestamp
+
string
+
'true' or 'false' (default is 'true')
+
+
+
auto-scroll
+
string
+
'true' or 'false' (default is 'true')
+
+
+
allow-settings
+
string
+
'true' or 'false' (default is 'true')
+
+
+
theme
+
string
+
'auto', 'light', or 'dark' (default is 'auto')
+
+
+
+
\ No newline at end of file
diff --git a/site/content/_index.md b/site/content/_index.md
index e031ff9..67b3479 100644
--- a/site/content/_index.md
+++ b/site/content/_index.md
@@ -2,13 +2,16 @@
layout: home
title: CueSync
aliases:
- - "/1.0/"
- - "/1.0/overview/"
+ - "/2.0/"
+ - "/2.0/overview/"
+ - "/overview/"
---
See CueSync in action!
-
+
@@ -19,7 +22,10 @@ aliases:
-
+
@@ -29,15 +35,17 @@ aliases:
-
+
{{< squiggle >}}
-
-
Get started any way you want
-
Use the CDN, install it via package manager, or download.
+
+
Get started any way you want
+
Use the CDN, install it via package manager, or download.
+ React + Vite
+ 
+ Next.js
+ 
+ Vue + Vite
+ 
+ Angular
+ 
- Webpack
+ 
- Parcel
+ 
- Vite
+