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

[taj54]

Hi everyone,

With the core interactive video library available via npm:

npm i @interactive-video-labs/core

…this is a great opportunity to explore a thin Svelte wrapper for seamless integration into Svelte apps and SvelteKit projects.

---

💩 Why a Thin Svelte Wrapper?

Svelte’s reactivity and minimal runtime make it ideal for embedding lightweight, dynamic experiences like interactive videos.

A thin wrapper would:

• Provide a simple <IVLabsPlayer /> Svelte component
• Bind to src, cues, and other props reactively
• Dispatch events like interaction, response, and analytics
• Keep the player API directly accessible via bind:this

---

🎯 Example Usage

Here’s how the wrapper might be used:

<script>
  import IVLabsPlayer from '@interactive-video-labs/svelte'
  let cuePoints = [...];
  let playerRef;

  function handleInteraction(event) {
    console.log(event.detail);
  }
</script>

<IVLabsPlayer
  bind:this={playerRef}
  src="/main.mp4"
  {cuePoints}
  on:interaction={handleInteraction}
  on:response={(e) => console.log(e.detail)}
  on:analytics={(e) => trackEvent(e.detail)}
/>

This Svelte component would wrap the core player and expose its API with native reactivity.

---

🛠️ Roadmap Thoughts

This wrapper could live in a standalone repo like @interactive-video-labs/svelte.

• Keep logic close to the core
• TypeScript and SvelteKit compatible
• No additional styles or heavy abstraction
• Allow full access to the internal player instance if needed

---

🤝 Open Questions

• Would a Svelte wrapper benefit your current or future projects?
• Should we support SSR compatibility for SvelteKit?
• Interested in helping build, test, or document this?

---

We’d love to hear your ideas and contributions as we expand the ecosystem!

– Tajul (on behalf of Interactive Video Labs)