🚀 Discussion: Thin Angular Wrapper for @interactive-video-labs/core

[taj54]

Hi everyone,

With the @interactive-video-labs/core now published on npm:

npm i @interactive-video-labs/core

…it’s the right moment to explore an Angular wrapper to allow developers to seamlessly integrate interactive video playback into Angular applications.

---

🧩 Why an Angular Wrapper?

Angular powers many enterprise-grade and educational applications. A lightweight Angular component can:

• Provide a declarative <ivlabs-player> custom component
• Use @Input() bindings for config like src, cues, etc.
• Emit @Output() events for interaction, response, and analytics
• Let users call methods or get player instance via ViewChild

---

🌟 Example Usage

Here’s what using the Angular wrapper might look like:

<!-- in your Angular template -->
<ivlabs-player
  [src]="mainVideo"
  [cues]="cuePoints"
  (interaction)="onInteraction($event)"
  (response)="onResponse($event)"
  (analytics)="trackAnalytics($event)"
></ivlabs-player>

// in your component.ts
@ViewChild('player') player: IVLabsPlayerComponent;

onInteraction(event: any) {
  console.log('Interaction', event);
}

---

🛠️ Design Considerations

We envision this Angular wrapper to:

• Be a lightweight @Component()-based bridge
• Support Angular’s DI and lifecycle hooks cleanly
• Offer strong typing with @types/interactive-video-labs
• Support SSR if needed

This wrapper can live in its own package, e.g. @interactive-video-labs/angular.

---

🤝 Open Questions

• Would you use this in your Angular project?
• Should we support Angular 15+ or go back to Angular 13?
• SSR support: critical or optional?
• Interested in contributing or testing the initial release?

---

Let us know what you'd like to see in this wrapper — contributions and feedback are welcome!

– Tajul (on behalf of Interactive Video Labs)

[taj54]

this is done