Skip to content

Make CueSync a web component #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
nkdas91 merged 23 commits into from
Apr 25, 2025
Merged

Make CueSync a web component #5

nkdas91 merged 23 commits into from
Apr 25, 2025

Conversation

@nkdas91
Copy link
Member

@nkdas91 nkdas91 commented Oct 28, 2024

Description

  • Refactored cuesync.js to define <cue-sync> as a web component
  • Added Shadow DOM encapsulation and custom attributes
  • Updated initialization to register CueSync with customElements API
  • Introduced theme attribute with support for light, dark, and auto modes
  • Added language selection dropdown for handling multiple transcript languages
  • Provided layout options (stacked, paragraph) to toggle transcript display style
  • Added settings menu to allow user interaction with customization options

Type of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (non-breaking change)
  • Breaking change (fix or feature that would change existing functionality)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • I have added tests to cover my changes

@nkdas91
Make CueSync a web component
ac52a7f 
- Refactored cuesync.js to define <cue-sync> as a web component
- Added Shadow DOM encapsulation and custom attributes
- Updated initialization to register CueSync with customElements API
- Introduced `theme` attribute with support for light, dark, and auto modes
- Added language selection dropdown for handling multiple transcript languages
- Provided layout options (stacked, paragraph) to toggle transcript display style
- Added settings menu to allow user interaction with customization options
@nkdas91 nkdas91 added the enhancement New feature or request label Oct 28, 2024
@nkdas91 nkdas91 self-assigned this Oct 28, 2024
@nkdas91 nkdas91 marked this pull request as draft October 28, 2024 14:19
nkdas91 added 20 commits November 7, 2024 19:09
@nkdas91
Remove an event listener before adding it, to avoid having duplicate …
ae2c83a 
…event listeners
@nkdas91
Hide the settings menu when clicked outside
f0115a5
@nkdas91
Update CueSync behavior to reflect attribute changes
6021a55 
Ensures that changes to attributes such as theme, layout, show-timestamp, and auto-scroll are immediately reflected in the UI without requiring a full refresh.
@nkdas91
Refactor and remove redundancy
d4e8120
@nkdas91
Rename audio, video and transcript files
e7b734c
@nkdas91
Move CSS from cuesync.js to a separate cuesync.scss file for better s…
5e71da5 
…eparation of concerns and maintainability.
@nkdas91
Move documentation related to v2 into a new folder
d9477d5
@nkdas91
Add version selector
0c80cab
@nkdas91
Merge branch main into web-component
ead1ddb
@nkdas91
Merge branch 'main' into web-component
5c85a09
@nkdas91
Update documentation
3a78a25
@nkdas91
Call _renderComponent() before calling _requestRefresh() to remove un…
d399ee2 
…wanted html elements

Recreate _handleTimeUpdate() everytime _addMediaEventListener() is called to avoid referencing to stale transcript lines.
@nkdas91
Rename class names and css custom properties
456cc49
@nkdas91
Update Specs page
00de59e
@nkdas91
Update examples doc
5bb3c8c
@nkdas91
Update docs and add an image marking different parts of CueSync compo…
8ef766e 
…nent
@nkdas91
Add an image showing different parts of the cuesync element
bc60da3
@nkdas91
Update JS variables
81523f2
@nkdas91
Update dependencies
94b0efb
@nkdas91
Add links to framework examples
8e32387
@nkdas91 nkdas91 marked this pull request as ready for review April 24, 2025 14:37
@nkdas91 nkdas91 moved this from In progress to In review in v2.0.0 Apr 24, 2025
@nkdas91 nkdas91 merged commit 0dbdeb5 into main Apr 25, 2025
1 check passed
@github-project-automation github-project-automation bot moved this from In review to Done in v2.0.0 Apr 25, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@nkdas91 nkdas91

Labels

enhancement New feature or request

Projects

v2.0.0
Status: Done

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@nkdas91