docs: Update CHANGELOG.md with recent changes#2
Conversation
This commit introduces an Angular wrapper component (InteractiveVideoComponent) for the interactive video player.
Key changes include:
- `src/index.ts`: Implements the InteractiveVideoComponent as a standalone component, handling player initialization, configuration, and event
emission. A deprecated InteractiveVideoModule is also included for backward compatibility.
- `tsconfig.json`: Updates TypeScript configuration to support Angular decorators and library building.
- `tsup.config.ts`: Adds tsup configuration for building the Angular library, generating ESM and CJS formats, and declaration files.
- `vitest.config.ts`: Integrates @analogjs/vite-plugin-angular for better testing of Angular components with Vitest.
This provides a reusable Angular component for integrating the interactive video player into Angular applications.
This commit adds a basic Vitest test for the InteractiveVideoComponent to ensure it can be created successfully.
Key changes:
- est/interactive-video.test.ts: New test file for InteractiveVideoComponent.
- �itest.config.ts: Updated to include test files from the est/ directory.
This commit introduces the CONTRIBUTING.md file, outlining guidelines for contributing to the interactive video Angular wrapper.
Key sections include:
- Code of Conduct
- How to Contribute (reporting bugs, suggesting enhancements, code contributions, pull requests)
- Development Setup
- Styleguides (Git Commit Messages, TypeScript Styleguide)
- License
This commit introduces a comprehensive README.md file for the interactive-video-angular-wrapper project.
The README.md provides:
- Project overview and description.
- Detailed installation instructions.
- Usage examples for various scenarios (basic, cue points, translations, analytics, external mounting).
- API reference for component inputs and outputs.
- Links to contributing guidelines and development setup documentation.
- License information.
This commit introduces the DEVELOPER.md file, providing comprehensive instructions for setting up the development environment,
understanding the project structure, and using various development scripts.
Key sections include:
- Prerequisites (Node.js, pnpm)
- Getting Started (cloning, installing dependencies)
- Project Structure overview
- Detailed Development Scripts (install, build, dev, test, clean)
- Information on Linting and Formatting
- Troubleshooting common issues.
WalkthroughThis change introduces comprehensive scaffolding for an Angular package that wraps an interactive video player. It adds new documentation (README, CONTRIBUTING, DEVELOPER, CHANGELOG), configuration (TypeScript, Vitest, tsup), dependency updates, a standalone Angular component with lifecycle management, a deprecated module, and a basic test suite. No existing code is modified. Changes
Sequence Diagram(s)sequenceDiagram
participant AngularApp
participant InteractiveVideoComponent
participant IVLabsPlayer
participant DOM
AngularApp->>InteractiveVideoComponent: Instantiate with inputs (videoUrl, cues, etc.)
InteractiveVideoComponent->>DOM: AfterViewInit - locate/mount target element
InteractiveVideoComponent->>IVLabsPlayer: Initialize player with config
IVLabsPlayer-->>InteractiveVideoComponent: Player instance ready
InteractiveVideoComponent->>IVLabsPlayer: Set cues, translations, locale
IVLabsPlayer-->>InteractiveVideoComponent: Emit analytics events
InteractiveVideoComponent-->>AngularApp: Emit analyticsEvent (EventEmitter)
AngularApp->>InteractiveVideoComponent: Update inputs (OnChanges)
InteractiveVideoComponent->>IVLabsPlayer: Reinitialize/update as needed
AngularApp->>InteractiveVideoComponent: Destroy
InteractiveVideoComponent->>IVLabsPlayer: Destroy player
Estimated code review effort🎯 4 (Complex) | ⏱️ ~35 minutes Poem
Note 🔌 MCP (Model Context Protocol) integration is now available in Early Access!Pro users can now connect to remote MCP servers under the Integrations page to get reviews and chat conversations that understand additional development context. ✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Note Unit test generation is an Early Access feature. Expect some limitations and changes as we gather feedback and continue to improve it. Generating unit tests... This may take up to 20 minutes. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
🧹 Nitpick comments (8)
CHANGELOG.md (1)
1-14: Changelog entry looks good; consider adding links and aligning PR title.
- Optional: turn short SHAs into links and add a “Compare” link for 0.0.1 for traceability.
- The PR title says “docs:” but this PR also adds tests and config. Consider retitling (e.g., “feat(test,docs,build): …”) or splitting PR for clarity.
test/interactive-video.test.ts (1)
19-21: Strengthen the assertion for clarity.Also assert the instance type to catch incorrect declarations/exports.
Apply this diff:
- it('should create', () => { - expect(component).toBeTruthy(); - }); + it('should create', () => { + expect(component).toBeTruthy(); + expect(component).toBeInstanceOf(InteractiveVideoComponent); + });tsconfig.json (1)
9-10: Generate declaration maps for better DX when debugging library typings.Helps consumers map
.d.tsback to sources.Apply this diff:
"declaration": true, + "declarationMap": true, "outDir": "./dist",tsup.config.ts (2)
14-14: Normalise thewatchflag.
watch: options.watchforwards anundefinedwhen the flag isn’t set, whiletsupexpects a boolean.
UseBoolean(options.watch)(or defaultfalse) to avoid"watch must be a boolean"edge-case in some CI invocations.
16-21: Trim left-padding in the generated banner.The multiline template literal is indented, so every emitted file starts with eight spaces before
/**, which violates some license-scanner rules.- js: `/** + js: `/**Left-align the first
/**or build the string programmatically.DEVELOPER.md (1)
46-50: Fix list indentation to satisfy markdownlint.Nested bullets under “Project Structure” use four spaces; markdownlint (MD007) expects two.
- - `index.ts`: ... + - `index.ts`: ...README.md (1)
21-24: Typo in installation section.
YouTo install the package→To install the package.src/index.ts (1)
96-100: AvoidsetTimeoutfor view-ready guarantee.
setTimeout(0)relies on the macro-task queue; preferPromise.resolve().then(...)or Angular’sngZone.onStablefor determinism and easier testing.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (10)
CHANGELOG.md(1 hunks)CONTRIBUTING.md(1 hunks)DEVELOPER.md(1 hunks)README.md(1 hunks)package.json(1 hunks)src/index.ts(1 hunks)test/interactive-video.test.ts(1 hunks)tsconfig.json(1 hunks)tsup.config.ts(1 hunks)vitest.config.ts(1 hunks)
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
DEVELOPER.md
47-47: Unordered list indentation
Expected: 2; Actual: 4
(MD007, ul-indent)
49-49: Unordered list indentation
Expected: 2; Actual: 4
(MD007, ul-indent)
🪛 LanguageTool
README.md
[grammar] ~22-~22: Ensure spelling is correct
Context: ...- License ## Installation YouTo install the package, use your preferred...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🔇 Additional comments (2)
tsup.config.ts (1)
2-2: Guard JSON import withresolveJsonModule.
import pkg from './package.json';requires"resolveJsonModule": true(and"esModuleInterop": true) intsconfig.json.
If those flags are missing, the config will not execute when consumers compile with plaints-node/tsup.
Double-check the roottsconfig.CONTRIBUTING.md (1)
1-102: Looks good.Contribution guide is clear and thorough.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
README.md (3)
42-42: Typo: fix “YouTo install …”.-YouTo install the package, use your preferred package manager: +To install the package, use your preferred package manager:
149-154: Tighten TS example by destructuring the tuple in the parameter.Removes a temp variable and reads cleaner.
-export class AnalyticsExampleComponent { - handleAnalytics(event: [event: AnalyticsEvent, payload?: AnalyticsPayload]): void { - const [eventName, payload] = event; +export class AnalyticsExampleComponent { + handleAnalytics([eventName, payload]: [event: AnalyticsEvent, payload?: AnalyticsPayload]): void { console.log(`Analytics Event: ${eventName}`, payload); // Send to your analytics service } }
199-199: Remove stray text at end of License sentence.-This project is licensed under the [MIT License](LICENSE).engine API. +This project is licensed under the [MIT License](LICENSE).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
README.md(2 hunks)
🧰 Additional context used
🪛 LanguageTool
README.md
[grammar] ~41-~41: Ensure spelling is correct
Context: ...- License ## Installation YouTo install the package, use your preferred...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🔇 Additional comments (2)
README.md (2)
10-10: Supported npm download metric “d18m” – no change requiredShields.io supports the following npm-download intervals:
• dd (daily)
• dw (weekly)
• dm (monthly)
• dy (yearly)
• d18m (last 18 months)
• dt (total)Since
d18mis valid, the existing badge can remain as is.Likely an incorrect or invalid review comment.
83-84: No action needed: README imports are validBoth
InteractiveVideoComponentandCuePoint(along with other types) are exported from the Angular package’s entry point (src/index.ts), so the example import in README.md will compile as-is.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
|
Caution CodeRabbit timed out while planning changes for src/index.ts. Skipping this file. |
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (4)
test/interactive-video.test.ts (1)
9-17: Add teardown to fix test isolation (see previous review)Same feedback as earlier: enable Angular’s teardown and destroy the fixture to avoid state leakage.
package.json (1)
57-57: Remove unused Angular CLI/app-only devDependencies.These are typically unnecessary for a library built with tsup + Vitest and inflate installs.
"devDependencies": { "@analogjs/vite-plugin-angular": "^1.19.4", - "@angular-devkit/build-angular": "^20.1.5", "@angular/common": "^20.1.6", "@angular/compiler": "^20.1.6", "@angular/compiler-cli": "^20.1.6", "@angular/core": "^20.1.6", "@angular/platform-browser": "^20.1.6", - "@angular/platform-browser-dynamic": "^20.1.6", "jsdom": "^26.1.0", "tsup": "^8.5.0", "typescript": "^5.9.2", "vitest": "^3.2.4", "zone.js": "^0.15.1" }Also applies to: 63-63
src/index.ts (2)
75-80:playerTargetIdstill computed too early
targetElementIdis undefined during construction, soplayerTargetIdalways falls back to the random ID, even when the consumer suppliestargetElementIdlater. Move this calculation tongOnInit/initializePlayerwhere inputs are settled.
143-158: Late subscribers still miss analytics eventsListeners are only added when
analyticsEvent.observedistrueat init time. Consumers that subscribe later never receive events. Register unconditionally or checkthis.analyticsEvent.observers.lengthon emit.
🧹 Nitpick comments (14)
vitest.setup.ts (1)
1-2: Drop the redundantzone.jsimport
zone.js/testingalready brings in the core zone package. Keeping both lines is harmless but unnecessary noise.-import 'zone.js'; import 'zone.js/testing';CHANGELOG.md (1)
1-4: Add an Unreleased header for future entriesKeeping a pre-created “Unreleased” section at the top helps avoid merge conflicts and streamlines future changelog updates.
test/interactive-video.test.ts (1)
1-4: Importing Vitest globals is redundant
globals: trueis enabled in vitest.config.ts, so you can drop the explicitimport { describe, it, … } from 'vitest'and avoid tree-shaking issues that sometimes lead Vitest to think a file contains no tests.-import { describe, it, expect, beforeEach } from 'vitest'; +// Vitest globals are available – no import neededvitest.config.ts (1)
11-12: Use an array forsetupFilesto avoid future config churnVitest accepts both string and string[], but switching to an array makes adding further setup files trivial.
- setupFiles: './vitest.setup.ts', + setupFiles: ['./vitest.setup.ts'],DEVELOPER.md (3)
42-43: Clarify peer dependency installation.pnpm does not install peerDependencies automatically. The sentence is misleading.
-This will install all project dependencies, including development and peer dependencies. +This will install all project and dev dependencies for this repo. Peer dependencies are expected to be provided by the consuming application and are not installed automatically.
47-49: Fix list indentation to satisfy markdownlint (MD007).Current nested list items are over-indented.
-- `src/`: Contains the source code for the Angular wrapper component. - - `index.ts`: The main entry point for the library, exporting `InteractiveVideoComponent` and related types. +- `src/`: Contains the source code for the Angular wrapper component. + - `index.ts`: The main entry point for the library, exporting `InteractiveVideoComponent` and related types.
108-108: Sync Angular version ranges with package.json peerDependencies.This line references ^15–^17. Once peer ranges are updated to include ^18–^20, reflect that here.
tsconfig.json (1)
17-18: Consider type-checking tests with a separate tsconfig or remove test from exclude.Excluding "test" avoids build pollution, but it also skips TS checking for tests. If you want IDE/CI type-checks for tests, add a tsconfig.test.json and point Vitest to it, or drop "test" from exclude.
CONTRIBUTING.md (1)
25-25: Replace placeholder contact in Code of Conduct section.A placeholder weakens guidance for reporting incidents.
-This project adheres to the [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [insert contact email or method here, e.g., `support@example.com`]. +This project adheres to the [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to support@interactive-video-labs.com (or via GitHub Issues).README.md (3)
10-10: Fix the downloads badge URL.The path segment should be npm/dm (monthly) or npm/dt (total), not d18m.
- <img src="https://img.shields.io/npm/d18m/@interactive-video-labs/angular?style=flat-square" alt="NPM Downloads" /> + <img src="https://img.shields.io/npm/dm/@interactive-video-labs/angular?style=flat-square" alt="NPM Downloads" />
42-42: Fix typo in Installation intro."YouTo install" → "To install"
-YouTo install the package, use your preferred package manager: +To install the package, use your preferred package manager:
199-199: Remove trailing stray text.Cleanup after License sentence.
-This project is licensed under the [MIT License](LICENSE).engine API. +This project is licensed under the [MIT License](LICENSE).src/index.ts (2)
85-88: Avoid needless destroy/re-create cycles
shouldReinitializeflags any write tovideoUrl,autoplay, orloop, even if the value hasn’t changed (previousValue === currentValue). Compare old vs new to skip redundant teardown.
107-110: Prefer micro-task over macro-task for immediate post-view workA zero-delay
setTimeoutdefersinitializePlayeran entire tick. UsingPromise.resolve().then(() => this.initializePlayer())schedules it after view init but before the next paint, reducing flicker.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (11)
CHANGELOG.md(1 hunks)CONTRIBUTING.md(1 hunks)DEVELOPER.md(1 hunks)README.md(2 hunks)package.json(2 hunks)src/index.ts(1 hunks)test/interactive-video.test.ts(1 hunks)tsconfig.json(1 hunks)tsup.config.ts(1 hunks)vitest.config.ts(1 hunks)vitest.setup.ts(1 hunks)
🧰 Additional context used
🪛 GitHub Actions: Run Tests
test/interactive-video.test.ts
[error] 1-1: Vitest test failure: No test suite found in file test/interactive-video.test.ts
🪛 markdownlint-cli2 (0.17.2)
DEVELOPER.md
47-47: Unordered list indentation
Expected: 2; Actual: 4
(MD007, ul-indent)
49-49: Unordered list indentation
Expected: 2; Actual: 4
(MD007, ul-indent)
🪛 LanguageTool
README.md
[grammar] ~41-~41: Ensure spelling is correct
Context: ...- License ## Installation YouTo install the package, use your preferred...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🔇 Additional comments (4)
tsup.config.ts (1)
2-2: Verify JSON import compatibility
import pkg from './package.json';relies onresolveJsonModule(TS) and on a JSON loader at runtime.
Double-check that:
tsconfig.jsonhas"resolveJsonModule": true.- The emitted JS uses an assertion (
assert { type: 'json' }) or a dynamiccreateRequirefallback so it runs on plain Node ≥20.Otherwise the build script may fail outside the ts-node/esbuild context.
test/interactive-video.test.ts (1)
1-22: CI failure: Vitest doesn’t register the suiteGitHub Action logs show “No test suite found…”.
After dropping the unused Vitest import (see above) make sure the matcher in vitest.config.ts also covers this file name:-include: ['test/**/*.test.ts'], +include: ['test/**/*.{spec,test}.ts'],Re-run the pipeline to confirm the suite is collected.
Likely an incorrect or invalid review comment.
tsconfig.json (1)
11-13: Good: Angular-friendly TS 5 settings applied.emitDecoratorMetadata=false and useDefineForClassFields=false align with Angular guidance.
README.md (1)
135-151: All referenced types are correctly re-exported in the public APII’ve verified in src/index.ts (around lines 184–190) that
CuePoint,Translations,AnalyticsEvent, andAnalyticsPayloadare all exported from@interactive-video-labs/core. No further changes are needed.
1 participant
Summary by CodeRabbit
New Features
Documentation
Tests
Chores