@interactive-video-labs/react
Version:
Thin React wrapper for the @interactive-video-labs/core engine. Enables cue-based interactive video playback in React apps.
85 lines (82 loc) • 2.1 kB
JavaScript
/**
* @interactive-video-labs/react v0.1.0
* Author: Taj
* @license MIT
*/
// src/index.tsx
import { useEffect, useRef } from "react";
import {
IVLabsPlayer
} from "@interactive-video-labs/core";
import { jsx } from "react/jsx-runtime";
var generateUniqueId = () => `ivlabs-player-${Math.random().toString(36).slice(2, 9)}`;
var InteractiveVideo = ({
videoUrl,
onAnalyticsEvent,
cues,
translations,
...restOptions
}) => {
const containerRef = useRef(null);
const playerRef = useRef(null);
const uniqueIdRef = useRef(generateUniqueId());
useEffect(() => {
if (!containerRef.current) return;
const playerConfig = {
videoUrl,
...restOptions
};
try {
const player = new IVLabsPlayer(uniqueIdRef.current, playerConfig);
playerRef.current = player;
if (onAnalyticsEvent) {
const events = [
"PLAYER_LOADED",
"VIDEO_STARTED",
"VIDEO_PAUSED",
"VIDEO_ENDED",
"CUE_TRIGGERED",
"INTERACTION_COMPLETED",
"ERROR"
];
events.forEach((event) => {
player.on(
event,
(payload) => onAnalyticsEvent(event, payload)
);
});
}
} catch (error) {
console.error("Error initializing IVLabsPlayer:", error);
}
return () => {
if (playerRef.current) {
playerRef.current.destroy();
playerRef.current = null;
}
};
}, [videoUrl, onAnalyticsEvent, restOptions]);
useEffect(() => {
if (playerRef.current && cues) {
playerRef.current.loadCues(cues);
}
}, [cues]);
useEffect(() => {
if (playerRef.current && translations) {
const locale = restOptions.locale || "en";
playerRef.current.loadTranslations(locale, translations);
}
}, [translations, restOptions.locale]);
return /* @__PURE__ */ jsx(
"div",
{
ref: containerRef,
id: uniqueIdRef.current,
style: { width: "100%", height: "auto" },
"data-testid": "interactive-video-container"
}
);
};
export {
InteractiveVideo
};