Skip to content

Commit 832d9f2

Browse files
taj54taj54
committed
feat: Add React wrapper and example
This commit introduces a React wrapper for the core interactive video engine. - Adds an `InteractiveVideo` React component. - Includes an example implementation. - Sets up testing with Vitest and Testing Library. - Updates package configuration for React and build processes.
1 parent 87fdf58 commit 832d9f2

File tree

10 files changed

+765
-8
lines changed

10 files changed

+765
-8
lines changed

‎examples/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Interactive Video React Wrapper Example</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="./dist/index.js"></script>
11+
</body>
12+
</html>

‎examples/index.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom/client';
3+
import { InteractiveVideo } from '../dist/index';
4+
5+
const App = () => {
6+
return (
7+
<div>
8+
<h1>Interactive Video React Wrapper Example</h1>
9+
<div style={{ width: '80%', margin: '0 auto' }}>
10+
<InteractiveVideo
11+
videoUrl="https://interactive-video-labs.github.io/interactive-video-demos/videos/big_buck_bunny.mp4"
12+
autoplay={true}
13+
onAnalyticsEvent={(event, payload) => {
14+
console.log('Analytics Event:', event, payload);
15+
}}
16+
/>
17+
</div>
18+
</div>
19+
);
20+
};
21+
22+
ReactDOM.createRoot(document.getElementById('root')!).render(
23+
<React.StrictMode>
24+
<App />
25+
</React.StrictMode>
26+
);

‎package.json‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"name": "@interactive-video-labs/react",
33
"version": "0.0.1",
44
"description": "Thin React wrapper for the @interactive-video-labs/core engine. Enables cue-based interactive video playback in React apps.",
5+
"type": "module",
56
"main": "dist/index.cjs",
67
"module": "dist/index.mjs",
78
"types": "dist/index.d.ts",
@@ -16,11 +17,13 @@
1617
"dist"
1718
],
1819
"scripts": {
19-
"build": "tsup src/index.ts --format esm,cjs --dts",
20-
"dev": "tsup src/index.ts --watch --format esm,cjs",
20+
"build": "tsup src/index.tsx --format esm,cjs --dts",
21+
"dev": "tsup src/index.tsx --watch --format esm,cjs",
2122
"test": "vitest run",
2223
"clean": "rm -rf dist",
23-
"prepare": "pnpm build"
24+
"prepare": "pnpm build",
25+
"serve-examples": "pnpm build-examples && http-server examples -c-1",
26+
"build-examples": "esbuild examples/index.tsx --bundle --outfile=examples/dist/index.js --jsx=automatic"
2427
},
2528
"keywords": [
2629
"interactive-video",
@@ -44,14 +47,20 @@
4447
},
4548
"packageManager": "pnpm@10.13.1",
4649
"peerDependencies": {
50+
"@interactive-video-labs/core": "^0.1.2",
4751
"react": ">=17.0.0 || >=18.0.0",
48-
"react-dom": ">=17.0.0 || >=18.0.0",
49-
"@interactive-video-labs/core": "^0.1.2"
52+
"react-dom": ">=17.0.0 || >=18.0.0"
5053
},
5154
"dependencies": {
5255
"jsdom": "^26.1.0",
5356
"tsup": "^8.5.0",
5457
"typescript": "^5.8.3",
5558
"vitest": "^3.2.4"
59+
},
60+
"devDependencies": {
61+
"@testing-library/jest-dom": "^6.6.4",
62+
"@testing-library/react": "^16.0.0",
63+
"@types/react": "^19.1.9",
64+
"http-server": "^14.1.1"
5665
}
5766
}

0 commit comments

Comments
 (0)